I have drawn a map on my page using OPENLAYERS 3.0.
And in document.ready() i have drawn the map and have plotted few markers on it using
some Longitude and latitude combinations.
And i have added draw line,polygon and select feature on my map.
My idea is to plot few markers on the map while page load, and i would like to a
draw a ploygon or bounding box and then on clicking those selections i should be
able to get the markers plotted inside those selection, is it possible to do this
without looping, anyone please give me a suggestion to accomplish this.
my HTML and JAVASCRIPT code is as follows
var map, layer;
var drawControls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
$('document').ready(function () {
console.log('in');
OpenLayers.ProxyHost = "/proxy/?url=";
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
var newl = new OpenLayers.Layer.Text("text", { location: "./content/textfile.txt" });
map.addLayer(newl);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
//markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0, 0), icon));
var halfIcon = icon.clone();
//markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0, 45), halfIcon));
var Latitudes = '12.98267,13.00118,12.97161,12.97977,12.92828,12.97597';
var Longitudes = '80.26338,80.2565,80.24343,80.25288,80.23621,80.22121';
var LatArray = Latitudes.split(',');
var LonArray = Longitudes.split(',');
for (var g = 0; g < LatArray.length; g++) {
marker = new OpenLayers.Marker(new OpenLayers.LonLat(LonArray[g], LatArray[g]), icon.clone());
//marker.setOpacity(0.2);
marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
markers.addMarker(marker);
}
//marker = new OpenLayers.Marker(new OpenLayers.LonLat(90, 10), icon.clone());
//marker.setOpacity(0.2);
//marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
//markers.addMarker(marker);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
halfIcon.setOpacity(0.5);
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectors = new OpenLayers.Layer.Vector("Vector Layer",
{
renderers: renderer
});
vectors.events.on(
{
'featureselected': function (feature) {
$('counter').innerHTML = this.selectedFeatures.length;
$('myd').innerHTML = 'this.selectedFeatures.length :' + this.selectedFeatures.length + 'this.selectedFeatures[0].geometry.bounds :' + this.selectedFeatures[0].geometry.bounds;
},
'featureunselected': function (feature) {
$('counter').innerHTML = this.selectedFeatures.length;
$('myd').innerHTML = 'UNSEL this.selectedFeatures.length :' + this.selectedFeatures.length + 'this.selectedFeatures[0].geometry.bounds :' + this.selectedFeatures[0].geometry.bounds;
}
});
map.addLayers([layer, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
drawControls =
{
point: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Point
),
line: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Path
),
polygon: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Polygon
),
select: new OpenLayers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
};
for (var key in drawControls) {
map.addControl(drawControls[key]);
}
});
function init()
{
}
function toggleControl(element)
{
for (key in drawControls) {
var control = drawControls[key];
if (element.value == key && element.checked) {
control.activate();
}
else {
control.deactivate();
}
}
}
function update()
{
var clickout = document.getElementById("clickout").checked;
if (clickout != drawControls.select.clickout)
{
drawControls.select.clickout = clickout;
}
var box = document.getElementById("box").checked;
if (box != drawControls.select.box)
{
drawControls.select.box = box;
if (drawControls.select.active)
{
drawControls.select.deactivate();
drawControls.select.activate();
}
}
}
<div id="content"></div>
<h1 id="title">
Markers Layer Example</h1>
<div id="tags">
Marker, event, mousedown, popup, inco</div>
<div id="shortdesc">
Show markers layer with different markers</div>
<div id="map" class="smallmap">
</div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);"
checked="checked" />
<label for="noneToggle">
navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">
draw point</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">
draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<label for="polygonToggle">
draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="selecthover" id="selecthoverToggle" onclick="toggleControl(this);" />
<label for="selecthoverToggle">
Select features on hover</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle" onclick="toggleControl(this);" />
<label for="selectToggle">
select feature (<span id="counter">0</span> features selected)</label>
<ul>
<li>
<input id="box" type="checkbox" checked="checked" name="box" onchange="update()" />
<label for="box">
select features in a box</label>
</li>
<li>
<input id="clickout" type="checkbox" name="clickout" onchange="update()" />
<label for="clickout">
click out to unselect features</label>
</li>
</ul>
</li>
</ul>
<div id="myd">
</div>
This may be helpful.
I have found complete details at below location:
https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3
You can also check live demo here:
http://jsfiddle.net/GFarkas/fk1mqq25/1/
Related
I have try more time, But i can't
I have try:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
<div id="printableArea">
<h3>Print area</h3>
<input type="button" onclick="printDiv('printableArea')" value="print This page" />
</div>
I want add a image instead of Print value text.
The following HTML code rests inside a Modal component provided by reactstrap.
<div>
<label htmlFor="address">Location*</label>
<br />
<input
id="address"
className={classes.WholeWidthInput + " " + classes.BorderOverride}
type="text"
onChange={this.handleFormChange.bind(this, "address")}
onBlur={this.saveAddress.bind(this)}
required
placeholder="Find location"
value={this.props.post.address}
/>{" "}
<br />
</div>
The following code hooks up the google places api with the above input element.
handleGoogleSearchLoad = () => {
/* global google */
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180)
);
var options = { bounds: defaultBounds, types: ['(cities)'] };
const autocomplete = new google.maps.places.Autocomplete(document.getElementById("address"), options);
autocomplete.setFields(['address_components', 'formatted_address', 'geometry']);
this.setState({autocomplete});
}
But the thing is the dropdown appears behind the modal when I type something into the form to search. I tried the .pac_container css suggestion but it didn't work or maybe I don't know where the css should have been used. Thanks in advance.
I'm having an issue where the geocode isn't being executed. In my html file I have the following form below that takes in the address information.
<div class="row">
<div class="col s6">
<form id="addAddress" name="address_info" method="post">
<div class="row">
<div class="input-field col s12">
<input id="address" name="address" type="text" required>
<label for="address">Address</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="city" name="city" type="text" required>
<label for="city">City</label>
</div>
<div class="input-field col s2">
<input id="state" name="state" type="text" required>
<label for="state">State</label>
</div>
<div class="input-field col s4">
<input id="zipcode" name="zipcode" type="text" required>
<label for="zipcode">Zipcode</label>
</div>
</div>
<button class="btn light-blue darken-5" type="submit" name="address_info">Submit</button>
</form>
</div>
</div>
The js file then uses the information from the form to get the latitude and longitude values. The problem I'm getting is that the geocode function doesn't execute. The console logs show the fulladdress and 'before start geo', but nothing else.
function addAddress() {
document.getElementById("addAddress").addEventListener("submit", function() {
var geocoder = new google.maps.Geocoder();
const address = document.getElementById("addAddress").elements.namedItem("address").value;
const city = document.getElementById("addAddress").elements.namedItem("city").value;
const state = document.getElementById("addAddress").elements.namedItem("state").value;
const zipcode = document.getElementById("addAddress").elements.namedItem("zipcode").value;
var fulladdress = address + ' ' + city + ' ' + state + ' ' + zipcode;
console.log(fulladdress);
console.log("before start geo");
geocoder.geocode({'address': fulladdress}, function(results,status){
console.log("start geo");
if(status == google.maps.GeocoderStatus.OK){
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log(latitude, longitude);
console.log("after geo");
}
});
});
}
function main() {
addAddress();
}
document.addEventListener("DOMContentLoaded", main());
I have the js file and the google maps api with my api key linked to my html file. I have the Geocode API enabled. Any help will be appreciated thanks!
Edit:
function geolocate(address, callback){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status){
if(status == google.maps.GeocoderStatus.OK){
callback(results[0].geometry.location.lat(), results[0].geometry.location.lng());
}
});
}
function addAddress() {
document.getElementById("addAddress").addEventListener("submit", function() {
var geocoder = new google.maps.Geocoder();
const address = document.getElementById("addAddress").elements.namedItem("address").value;
const city = document.getElementById("addAddress").elements.namedItem("city").value;
const state = document.getElementById("addAddress").elements.namedItem("state").value;
const zipcode = document.getElementById("addAddress").elements.namedItem("zipcode").value;
var fulladdress = address + ' ' + city + ' ' + state + ' ' + zipcode;
console.log(fulladdress);
console.log("before start geo");
geolocate(fulladdress, function(latitude, longitude){
console.log(latitude, longitude);
});
});
}
My goal is to have several input fields with Autocomplete functionality and each input will generate a marker on the map. I then need the map to zoom in to contain all of the markers. I have this working partially, without the Autocomplete functionality. I have tried adding the Google Maps API Places Autocomplete code to my for loop, but to no avail. It gives autocomplete functionality to all the input fields but only places a marker for the last input.
Any help/insight/guidance is appreciated.
Here is my code, the autocomplete is currently deleted since I couldn't get it to work.
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 well">
<div id="locations">
<form>
<label>Location 0</label>
<input id="address0" type="text" size="50" >
<button id="clearField0">Clear</button>
<div class="panel">
<label>Location 1</label>
<input id="address1" type="text" size="50">
<button id="clearField0">Clear</button>
</div>
<div class="panel">
<label>Location 2</label>
<input id="address2" type="text" size="50">
<button id="clearField0">Clear</button>
</div>
</form>
</div>
<button id="addField">+</button>
<button id="deleteField">-</button>
<button id="submit">Submit form</button>
</div>
<div class="span8">
<div id="map-wrapper">
<div id="google-map"></div>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtNo_o0u8wYeqgiFF-KpvAtEy18T-PvAo&sensor=false&callback=createMap"></script>
<script type="text/javascript">
var inputFields = parseInt($('form input').size());
var markers = [];
var createMap = function() {
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var myOptions = {
center : new google.maps.LatLng(35.9081, -78.8628), //center to RTP
zoom : 12,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("google-map"), myOptions);
$("#submit").on("click", function() {
setAllMap(null);
markers.pop();
for (i=0; i<inputFields; i++) {
var location = $("#address" + i).val();
geocoder.geocode( {'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
latlngbounds.extend(results[0].geometry.location);
map.fitBounds(latlngbounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
});
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
$('#addField').click(function(){ //add input field to bottom of form
$('form').append('<div class="panel"><label>Location '+ inputFields +'</label><input id="address'+ inputFields +'" type="text" size="50"><button id="clearField'+ inputFields +'">Clear</button></div>');
inputFields++;
});
$('#deleteField').click(function(){ //delete last input field
$('.panel').last().remove();
inputFields--;
});
};
</script>
My first problem was including the places library in the API reference. Following that, I simply needed two lines of code from Google's Places Autocomplete example page, as opposed to the entire script they offer:
var input = /** #type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);
These two lines in my for loop solved the problem. Thanks again to Dr. Molle whose comment made me rethink what code I needed.
I am new to knockout.js. I am following this tutorial. It is working fine on knockout site but not for me. Error console is also not showing any error.
Below is my code
View:
Tasks
<form data-bind="submit: addTask">
Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
<button type="submit">Add</button>
</form>
<div >
<ul data-bind="foreach: tasks, visible: tasks().length > 0" id="testing">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<input data-bind="value: title, disable: isDone" />
Delete
</li>
</ul>
</div>
View Model:
<script>
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
}
function TaskListViewModel() {
// Data
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
});
// Operations
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText() }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.remove(task) };
}
ko.applyBindings(new TaskListViewModel(),document.getElementById("testing"));
</script>
The problem is that the ko.applyBindings doesn't apply to all data-bind attributes. Move your "testing" id to a place where it covers all the HTML code with the relevant "data-bind" attributes.