hello I have read this examples about leaflet route 360 services.
is very interests but that examples work with static coordinates,my question is how to can use this services using some point GeoJSON layer ?
my GeoJSON layer example:
coords = [];
var points = new L.GeoJSON.AJAX("{% url 'mylayer' %}",{
onEachFeature:function (feature,layer) {
coords.push(feature.geometry.coordinates.reverse());
layer.on('click', function (e) {
var field1=document.getElementById('f1');
field1.innerHTML=e.target.feature.properties.name;
});
layer.bindPopup(feature.properties.name.toString())
}
});
points.addTo(map);
leaflet route 360 example :
<script>
// define a pair of coordinates, where the map should be centered
// and should serve a the source for polygonization
var latlon = [52.51, 13.37];
// add the map and set the initial center to berlin
var map = L.map('map').setView(latlon, 14);
map.attributionControl.addAttribution("ÖPNV Daten © <a href='https://www.vbb.de/de/index.html' target='_blank'>VBB</a>");
// initialise the base map
r360.basemap({ style: 'basic', apikey: '__your-route360-api-key__' }).addTo(map);
// create the marker and add it to the map
var marker = L.marker((latlon)).addTo(map);
// create the layer to add the polygons
var polygonLayer = r360.leafletPolygonLayer().addTo(map);
// you need to define some options for the polygon service
// for more travel options check out the other tutorials
var travelOptions = r360.travelOptions();
// please contact us and request your own key if you don't already have one
travelOptions.setServiceKey('__your-route360-api-key__');
// set the service url for your area
travelOptions.setServiceUrl('https://service.route360.net/germany/');
// we only have one source which is the marker we just added
travelOptions.addSource(marker);
// we want to have polygons for 10 to 30 minutes
travelOptions.setTravelTimes([600, 1200, 1800]);
// go by foot
travelOptions.setTravelType('walk');
// call the r360°- service
r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons){
// add the returned polygons to the polygon layer
// and zoom the map to fit the polygons perfectly
polygonLayer.clearAndAddLayers(polygons, true);
});
</script>
Related
I would like to create a Google map with toggleable KML layers - every layer has its set of icons. Example of a map I would like to use can be seen here.
I am unable to set separate layers on the map so I can continue with making them toggleable one by one.
These are my steps for obtaining data for KML layers on Google map:
1. Select "Download KML"
2. I chose a layer ("Food stores" for example)
- I checked "Keep data up to date with network link KML" (Map will be maintained on Google maps and data should automatically refresh in my map on the website).
- I left unchecked "Export to a KML file" (because of the icons support)
Then I unzip downloaded files. Inside small code there is <href>http://www.google.com/maps/d/kml?mid=16i6f7Jvm754_jzkltP-Ks_2pKbU&lid=M97Oy53L0t4</href> which I include in url of sitesLayer when passing data for function loadKml() at the bottom of the following code.
The problem with this is that I instantly get all those icons on the map, even if I have downloaded and included only 1 layer - the map shows all 4 of them.
Am I missing something, in the code or in the steps for downloading KML files for separating layers/icons?
function initialize() {
// Map settings
var myLatlng = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 18,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Creating KML layers
loadKml = function(opts,map){
var layer = new google.maps.KmlLayer();
opts.preserveViewport = true;
if(map) {
opts.map = map;
}
google.maps.event.addListener(layer,'defaultviewport_changed',function() {
var map=this.getMap(),
bounds=map.get('kmlBounds') || this.getDefaultViewport();
bounds.union(this.getDefaultViewport());
map.set('kmlBounds',bounds);
map.fitBounds(bounds);
});
layer.setOptions(opts);
return layer;
}
// Setting KML layers
var sitesLayer = loadKml({
url: 'http://www.google.com/maps/d/kml?mid=1AQ5Is7NjBGjPZpLji5fbApYnegk&lid=z-AEWAAfH9c',
map: map
});
var sitesLayer2 = loadKml({
url: 'http://www.google.com/maps/d/kml?mid=16i6f7Jvm754_jzkltP-Ks_2pKbU&lid=jY6tGqHtk80',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm developing an app using the Ionic framework with AngularJS and the LeafletJS library.
When I load the map for the first time it displays correctly centered.
But, when I change to another view of the app and return to the map view, the WMS Tile Layer displays displaced from the center, only a little bit of it on the top left corner of the map can be seen.
Here it is the snippet of code that creates the map and loads the WMS Tile Layer:
function crearPlano($scope, $http, infoService, sharedProperties, poisService, createModal) {
var building = localStorage.building,
floor = localStorage.planta,
floor_id = building + floor,
building_id = floor_id.replace(/\./g,"_").toLowerCase();
var parameters =
[
'proyecto/ows',
'service=WFS',
'version=1.0.0',
'request=GetFeature',
'typeName=proyecto:'+building_id,
'srsName=epsg:4326',
'outputFormat=application/json'
]
var url = APP_CONSTANTS.URI_Geoserver_1 + 'proyecto/ows?' + parameters.join('&');
$.ajax({
url : url,
type: 'GET',
dataType : 'json',
crossDomain: true,
headers: { 'Access-Control-Allow-Origin': '*' },
success: function(data) {
handleJson(data, sharedProperties, poisService, createModal, function(map){
sharedProperties.setMap(map);
});
}
});
function handleJson(data, floor_id, sharedProperties, poisService, createModal, callback) {
console.log("handleJson", data, floor_id);
var map = sharedProperties.getMap(),
coordinates = data.features[0].geometry.coordinates[0][0][0],
floorCoordinates = new L.latLng(coordinates[1], coordinates[0]);
//Remove previous plan layers
if(!(typeof map == 'undefined')) { map.remove(); }
var imageLayer = new L.tileLayer.wms(APP_CONSTANTS.URI_Geoserver_2 + "sigeuz/wms",
{
layers: 'sigeuz:vista_plantas',
maxZoom: 25,
zIndex: 5,
viewparams : 'PLANTA:'+floor_id,
format: 'image/png', transparent: true, attribution: floor_id
});
console.log("Before create map --> Center", JSON.stringify(floorCoordinates));
console.log("Before create map --> MaxBounds", JSON.stringify(L.geoJson(data).getBounds()));
map= new L.map('plan'
,{
crs: L.CRS.EPSG3857,
layers: [imageLayer]
}
).setView(floorCoordinates, 20);
console.log("After create map --> Center", JSON.stringify(plano.getCenter()));
console.log("After create map --> Bounds", JSON.stringify(plano.getBounds()));
callback(map);
}
}
Why is the map loading centered only the first time, but displaced after?
I've added some console logs to the code in order to debug data passed as parameters to the map's creation and map's data after its creation. This way I can compare if something has changed in both situations described earlier. This is the result:
Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}}
After create map --> Center {"lat":41.6406381751715,"lng":-0.9014656782889374}
After create map --> Bounds {"_southWest":{"lat":41.64032848115259,"lng":-0.9017432869219788},"_northEast":{"lat":41.640947867702096,"lng":-0.9011880696558963}}
Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}}
After create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
After create map --> Bounds {"_southWest":{"lat":41.640637639043334,"lng":-0.9014663100242616},"_northEast":{"lat":41.640637639043334,"lng":-0.9014663100242616}}
As can be seen, data passed as center point and max bounds to the map creation is the same in both cases, but once the map has been created, center of the map coordinates and bounds differ a little bit from the first situation to the second one.
I don't quite understand why it changes.
Run invalidateSize() every time the map container potentially changes size. This includes hiding/displaying it via jquery, ionic, and the like.
This question is related to this question: Updating Leaflet Marker Position Every x Seconds with JSON. Only I want to project the map created with Leaflet onto a 3D globe with WebGLEarth. Normally you can combine Leaflet and WebGLEarth by replacing L.map, L.marker and so on with WE.map, WE.marker in your original Leaflet code.
I would like to have the current location of the International Space Station projected on my 3D globe, so I replaced the L.marker in the update_position function of this code...
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg';
var subDomains = ['otile1','otile2','otile3','otile4'];
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 11, subdomains: subDomains});
var map = new L.Map('map', {layers : [cloudmade]}).fitWorld();
var iss;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss.setLatLng([latitude,longitude]).update();
setTimeout(update_position, 1000);
});
}
update_position();
DEMO
...by WE.marker. Unfortunately, the updating of the position doesn't work anymore on my 3D globe, whereas it did work on the 2D map.
I tried adding
setInterval(update_position,2000);
just above update_position();, then the marker gets updated a few times (~5) and then suddenly stops. If I interact with my mouse on the globe by panning, the marker gets updated to its current position and gets updated a few times afterwards, and eventually stops again.
Main Question:
Does anyone know how to fix this so that I have a continuous marker update?
Additional Question:
Ideally I would like the International Space Station track to look like https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases, with a colored path the station travelled in its last orbit around the earth. Any tips on how to do this?
Thanks in advance!
[Edit 23-1-2015:
I managed to update it continuously by making a new variable for iis, namely iis2. Why this works is not clear to my. Unfortunately, all 'old' markerpositions don't dissapear, so I get a blurred marker track.
var iss;
var iis2;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss2.setLatLng([latitude,longitude]).update();
});
}
update_position();
setInterval(update_position,1000);
]
remove the marker
var iss;
var iis2;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
map.removeLayer(iss2);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss2.setLatLng([latitude,longitude]).update();
});
}
update_position();
setInterval(update_position,1000);
I am new to OSM API. (Open Street Map)
I'm currently searching for a solution to select (or highlight) a vector in a OpenLayers.
i.e am trying to set a location for user. That user can give his location by clicking on map (Particular location) and then need to do some manipulation with those longitude and latitude.
JS Code i have tried
function showVehicleMap(){
ltArray = document.getElementById('deviceMonitorRightPaneForm:lat').value.split(",");
lgArray = document.getElementById('deviceMonitorRightPaneForm:lon').value.split(",");
directionArray = document.getElementById('deviceMonitorRightPaneForm:direction').value.split(",");
map = createMap("deviceMap");
for(var i=0;i<ltArray.length;i++)
{
var lonLat = new OpenLayers.LonLat( lgArray[i] ,ltArray[i] ).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
pointsArray.push(lonLat);
}
//prepare mid point
var latAvg = document.getElementById('deviceMonitorRightPaneForm:latAvg').value;
var lonAvg = document.getElementById('deviceMonitorRightPaneForm:lonAvg').value;
var midpoint = new OpenLayers.LonLat(lonAvg,latAvg).transform( fromProjection, toProjection);
//create Marker
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
//prepare list of markers
markers = addMarkersByDirection(markers, pointsArray, directionArray);
map.zoomToExtent(markers.getDataExtent());
map.setCenter (midpoint, 9);
//
/* ]]> */
}
How do i achieve it?
Register a mouse click event to get the position via the mouse:
map.events.register('click', map, function handleMapClick(e) {
var clickedLonLat = map.getLonLatFromViewPortPx(e.xy).transform(map.projection, map.displayProjection);
...
// place a OpenLayers.Layer.Marker at clickedLonLat for visual feedback
// for convenience: map.panTo(clicketLonLat);
...
});
I'm working on functionality to take snapshot of google map with polylines and open popup window on polyline click on google map.
The snapshot of google map with polylines is working
but it will not able to take snapshot open popup window on polyline.
polyline are showing on sanpshot picture but info window are not showing .
Here is code to take snapshot.
This code is to initialize the code control on javascript onload :
var snapShotControlOptions = { hidden: true };
snapShotControlOptions.buttonLabelHtml="<snap id='snap' style='display:none' >snap</span>"
snapShotControl = new SnapShotControl(snapShotControlOptions);
map.addControl(snapShotControl);
here is the method take snap to take the sanp shot of google map .
function takeSnap() {
//static map size
var sizeStr = "640x640";
var imgSize = "";
if (sizeStr != "") {
var sizeArray = sizeStr.split("x");
imgSize = new GSize(sizeArray[0], sizeArray[1]);
}
snapShotControl.setMapSize(imgSize);
var format = "jpg";
snapShotControl.setFormat(format);
var url = snapShotControl.getImage();
// document.getElementById("snapshot_canvas").src = url;
SaveImage(url);
//
}
//this will add polyline overlay to draw line on google map with different color of polyline on google map .
var polyline = directionsArray[num].getPolyline();
polyline.setStrokeStyle({ color: streetColor, weight: 3, opacity: 0.7 });
polyline.ssColor=streetColor;
map.addOverlay(polyline);
///this code will open the pop info window on polyline those polyline created on google map
and problem is their these pop window not included on sanpshot when i take sanpshot of google map.
var MousePoint = "";
var marker;
GEvent.addListener(map, "mousemove", function (point) {
MousePoint = new GLatLng(point.lat(), point.lng());
});
GEvent.addListener(polyline, "click", function () {
map.openInfoWindowHtml(MousePoint, headMarkerHtml);
});
GEvent.addListener(polyline, "mouseout", function () {
// map.closeInfoWindow();
});
can you please tell who i pass popup window in polyline overlay .
i have use javascript file snapshotcontrol.js to take the snapshot.
from the snapshotcontrol source
This library makes it easy to generate an image "snapshot" of your
interactive map, using the Google Static Maps API.
Static maps doesn't support info windows or anything like adding custom text to the map
https://developers.google.com/maps/documentation/staticmaps/index
You could draw the map on a canvas within the browser then
draw the info window on top of that using this http://html2canvas.hertzen.com/
and then download the canvas content