I am using the time-slider plugin by Dennis Wilhelm to implement a time slider on my leaflet map. Everything worked perfectly except for one small issue. When I open the map in IE (i'm using IE version 11.0.31), the map moves when I slide the timer slider. However, I don't have the problem with Chrome. It seems to be an IE specific issue. I am very new to HTML and JavaScript and would really appreciate any thought and suggestion.
Below is a simple demo code that I mocked up using the author's instruction codes:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="SliderControl.js"></script>
</head>
<body>
<h2 id="Time slider test"></h2>
<div id="map" style="height: 600px; border: 1px solid #AAA;"></div>
<script>
var map=L.map("map").setView([51.6, -0.09], 10);
var streetLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
maxZoom: 18,
id: '*****',
accessToken: '*****'
}).addTo(map);
var marker1 = L.marker([51.5, -0.09], {time: "2013-01-22 08:42:26+01"});
var marker2 = L.marker([51.6, -0.09], {time: "2013-01-22 10:00:26+01"});
var marker3 = L.marker([51.7, -0.09], {time: "2013-01-22 10:03:29+01"});
var pointA = new L.LatLng(51.8, -0.09);
var pointB = new L.LatLng(51.9, -0.2);
var pointList = [pointA, pointB];
var polyline = new L.Polyline(pointList, {
time: "2013-01-22 10:24:59+01",
color: 'red',
weight: 3,
opacity: 1,
smoothFactor: 1
});
layerGroup = L.layerGroup([marker1, marker2, marker3]);
var sliderControl = L.control.sliderControl({layer: layerGroup}).addTo(map);
sliderControl.startSlider();
</script>
</body>
</html>
Related
I'm having trouble creating an object using the addObject function in an HTML element in Bubble.io.
I think the problem is related to the passing of arguments between functions (specially the “map” one).
In this example, the whole “map.object” part creates a circle in my map (which is displayed in the HTML element that contains my script). My goal is to have that chunk of code inside the addCircleToMap function, so that whenever a click is registered, the code will run. My problem is that whenever I do that, the addObject function is not recognized (inside of the addCircleToMap). But when I run it as in the example above (outside of said function) it is recognized and creates the circle as needed, but only one time.
If I want it to run inside of the addCircleToMap function, do I need to change anything?
Thank you very much for your help!
<html>
<head>
<title> MY MAP</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
</head>
<style>
#map {width: 800px; height: 600px;}
</style>
<div id="map"></div>
<body>
<script>
function initializeHEREmap(){
var mapContainer = document.getElementById('map'), routeInstructionsContainer = document.getElementById('panel');
let newLat = 19.46291370462809;
let newLng = -99.13708437766161;
const imlService = platform.getIMLService();
const platform = new H.service.Platform({
apikey: '*******************'
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: new H.geo.Point(newLat, newLng),
zoom: 12
}
);
window.addEventListener('resize', () => map.getViewPort().resize());
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);
setUpClickListener(map, newLat, newLng);
function setUpClickListener(map, newLat, newLng) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY);
newLat = coord.lat;
newLng = coord.lng;
addCircleToMap(map, newLat, newLng );
});
map.addObject(new H.map.Circle(
{lat:newLat, lng:newLng},
500,
{
style: {
strokeColor: 'rgba(55, 85, 170, 0.6)',
lineWidth: 2,
fillColor: 'rgba(89, 80, 218, 0.7)'
}
}
));
}
function addCircleToMap(map, newLat, newLng ){
//I WANT MY CODE HERE
}
}
</script>
</body>
</html>
I am trying to make a map that automatically pan to several locations, one after the other, using Leaflet 1.7.1. This is working quite well using the panTo() function :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<style>
html,body,#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
<script type='text/javascript' src='script.js'></script>
</html>
script.js
var map = L.map('map');
var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap contributors'
}).addTo(map);
map.dragging.disable();
map.setView([48.980, 4.373], 7);
var athens = [37.9844, 23.7398]
var stockholm = [59.3272, 18.0830]
setTimeout(function() {
map.panTo([athens[0], athens[1]], {
animate: true,
duration: 20,
easeLinearity: 0.9
})
}, 2000);
setTimeout(function() {
map.panTo([stockholm[0], stockholm[1]], {
animate: true,
duration: 15,
easeLinearity: 0.9
})
}, 22000);
I would like to add a pause/resume function, but I cannot figure how to do this. I am able to stop the animation using the following command :
map.setView(map.getCenter(), map.getZoom(), {"animate": false});
But I cannot resume the animation afterwards, and the later timed panTo events will happen anyway.
Any leads or ideas on how to achieve that ?
I'm using leaflet js and lantmateriet api for displaying map. But the map displaying empty white tiles in the browser. Map displaying fine with other api's like OSM. Im getting problem with lantmateriet api. This is my code.
var mapOptions = {
center: [59.4022, 13.5115],
zoom: 4
}
var map = new L.map('map', mapOptions);
L.tileLayer('https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/apikey/1.0.0/topowebb/default/3006/{z}/{y}/{x}.png', {
attribution: ''
}).addTo(map);
var marker = L.marker([59.3293, 18.0686]).addTo(map);
var m2 = L.marker([59.9139, 10.7522]).addTo(map);
m2.bindPopup("Oslo").addTo(map);
marker.bindPopup('Stockholm').addTo(map);
var latlngs = [
[59.9139, 10.7522],
[59.4022, 13.5115],
[59.3293, 18.0686]
];
var polyline = L.polyline(latlngs, {
color: 'red'
});
polyline.addTo(map);
var circleCenter = [59.4022, 13.5115]; // Center of the circle
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
}
// Creating a circle
var circle = L.circle(circleCenter, 10000, circleOptions);
circle.addTo(map); // Adding circle to the map
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 900px; height: 580px"></div>
</body>
</html>
Please help me to solve this problem. Thanks in advance.
It seems you have a problem with authentication to lantmateriet (all requests get a 401 return code), I didn't see anywhere a token for authentication.
I think you have to check that first.
I'm making an ASP.NET site with an OpenLayers map, but in IE it is always loading and in Chrome it says, that the site doesn't react, after a while.
The Script is inside a content tag.And I'm using release 2.13.1.
This is the code:
<script type="text/javascript" src="../Scripts/OpenLayers.js" ></script>
<script type="text/javascript" src="../Scripts/expand.js"></script>
<!-- map built with OpenLayers api on OpenStreetMap -->
<script type="text/javascript">
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 projection
projectTo = map.getProjectionObject(); // The map projection (Spherical Mercator)
// Define center-point
var lonLat = new OpenLayers.LonLat(8.2891666666666666666666666, 46.8344444444444444444).transform(epsg4326, projectTo);
map.setCenter(lonLat, 8);
</script>
Is my link wrong or did I forget something else?
You're using OpenLayers 2 syntax with the OpenLayers 3 library. One key difference is rather than saying
map = new OpenLayers.Map("mapdiv");
You want to use
var map = new ol.Map("mapdiv");
You'll need to correct the other instances where you use 'OpenLayers' instead of 'ol'.
Here's a link to the getting started with OpenLayers 3 documentation.
Try this will work
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html,body,#mapdiv {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="../js/OpenLayers.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/ol-theme-style.css" />
</head>
<body>
<div id="mapdiv"></div>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var lonLat = new OpenLayers.LonLat(73.8567, 18.5203).transform(epsg4326, projectTo);
var zoom = 14;
map.setCenter(lonLat, zoom);
</script>
</body>
</html>
I'm using leaflet.snap (http://makinacorpus.github.io/Leaflet.Snap/) which lets me snap points to lines when drawing a polygon - just what I need. BUT I'm having a hard time trying to get set the polygons to be editable.
Here's my code, which uses Leaflet.Snap, and allows drawing but not editing of a polygon. Any help getting the polygons editable is much appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Snap Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
.leaflet-editing-icon.marker-snapped {
background-color: yellow;
}
</style>
<link rel="stylesheet" href="http://makinacorpus.github.io/Leaflet.Snap/Leaflet.draw/dist/leaflet.draw.css" />
<script src="http://makinacorpus.github.io/Leaflet.Snap/Leaflet.draw/dist/leaflet.draw.js"></script>
<script src="http://makinacorpus.github.io/Leaflet.Snap/Leaflet.GeometryUtil/dist/leaflet.geometryutil.js"></script>
<script src="http://makinacorpus.github.io/Leaflet.Snap/leaflet.snap.js"></script>
</head>
<body>
<div id="map" class="map" style="height: 500px; width: 800px"></div>
<script>
var theTileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © 2013 OpenStreetMap contributors',
});
var map = L.map('map').setView([45.4835656, -122.7332588], 12).addLayer(theTileLayer);
var guideLayers = new Array();
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: false,
polygon: {
shapeOptions: {
color: '#009900'
}
},
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false
},
edit: {
featureGroup: drawnItems, //REQUIRED!!
remove: true
}
});
map.addControl(drawControl);
// Editing lines works fine on the sample (http://makinacorpus.github.io/Leaflet.Snap/) but not below.
drawControl.setDrawingOptions({
polygon: { guideLayers: guideLayers, snapDistance: 15 },
});
map.on('draw:created', function (e) {
var layer = e.layer;
map.addLayer(layer);
guideLayers.push(layer);
});
</script>
</body>
</html>
It's just you missed to add layer to drawnItems while any drawing is complete. Just replace "map" by "drawnItems" in your code like following and it will work:
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
guideLayers.push(layer);
});
Enjoy!