I have managed to get a working map and I have managed to combine it with the Leaflet timedimension slider. The next thing I have to do is get a moving marker on the map that changes position depending on a scripted path, for example the marker on date X is on some specific coordinates, but on date Y the marker moves towards different scripted position.
I have so far managed to get a marker on the map but I am at loss what I have to do to make it move. I looked at the various examples of posted here and the example that seems to be the closest to what I need to achieve is this one, but the code points towards and external .xml file, which I don't know how I have to code it to work and the example code doesn't show what variables does the marker itself have in the .html file.
My question is, is it even possible to get a marker moving using this "timeDimension" slider and if it is, could someone point me towards some example code I could look at?
And a bit unrelated, is my current set up the best thing to use if I want to have a map with a timeline slider that moves around lots of markers over a span of couple of years?
Here is the code I have so far,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<link rel="stylesheet" href="leaflet.timedimension.control.css" />
<style>#map { height: 500px; }</style>
</head>
<body>
<p style="text-align: center;"><strong><span style="font-size: 20px;">Heading test</span></strong></p>
<!--Map with needed map scripts-->
<div id="map" style="height: 75%; width: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.
<script type="text/javascript" src="SliderScript.js"></script> //This is the Leaflet slider, just renamed
<!--Here is a script for map overlay -->
<!--Markers-->
<script>
var Icontest= L.icon({
iconUrl: 'icons/testicon1.png',
iconSize: [40, 25], // size of the icon
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
});
L.marker([29, 57], {icon: Icontest},{draggable: true}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
</script>
</body>
</html>
This is the SliderScript.js, which is the same thing as the example.js file on this site.
// example.js
var map = L.map('map', {
zoom: 10,
center: [38.705, 1.15],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2014-09-30/2014-10-30",
period: "PT1H"
},
timeDimensionControl: true,
});
var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
layers: 'sea_water_velocity',
format: 'image/png',
transparent: true,
attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
// example.js
var map = L.map('map', {
zoom: 10,
center: [38.705, 1.15],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2014-09-30/2014-10-30",
period: "PT1H"
},
timeDimensionControl: true,
});
var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
layers: 'sea_water_velocity',
format: 'image/png',
transparent: true,
attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
<html>
<head>
<title>Leaflet TimeDimension Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
</head>
<body>
<div id="map" style="height: 100%; width: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script type="text/javascript" src="example.js"></script>
<!--Markers-->
<script>
var Icontest = L.icon({
iconUrl: 'icons/testicon1.png',
iconSize: [40, 25], // size of the icon
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
});
L.marker([29, 57], {
icon: Icontest
}, {
draggable: true
}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
</script>
</body>
</html>
Related
I am building a WordPress plugin that involves the use of maps and user created custom markers. I want to separate the map from the marker so that a user can create custom markers cross map platform and keep the marker data on there WordPress page.
I set up a development server on a raspberry pi 3 B, with a 2 Terabyte hard drive that it boots from. I set up an OpenStreetMap tile server of North America to practice on and I got it up and through and html file in my /var/www/html that runs through a LAMP server that also includes my WordPress development web server.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Public Transport Lines - ÖV-Linien - openptmap.org</title>
<link rel="shortcut icon" href="favicon_pt.png">
<link rel="stylesheet" href="style.css" type="text/css">
<style> /* avoid empty tiles */ .olImageLoadError {display: none;}
</style>
<script src="OpenLayers.js" type="text/javascript"></script>
<script src="OpenStreetMap.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init() {
// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '../img/marker.png',
graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
title: '${tooltip}'
})
});
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
.transform('EPSG:4326', 'EPSG:3857');
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);
// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
myLocation.getBounds().getCenterLonLat(), null,
'<a target="_blank" href="http://openlayers.org/">We</a> ' +
'could be here.<br>Or elsewhere.', null,
true // <-- true if we want a close (X) button, false otherwise
);
// Finally we create the map
map = new OpenLayers.Map({
div: "map", projection: "EPSG:3857",
layers: [new OpenLayers.Layer.OSM(), overlay],
center: myLocation.getBounds().getCenterLonLat(), zoom: 15
});
// and add the popup to it.
map.addPopup(popup);
}
</script>
</head>
<body onload="init();">
<div style="width:100%; height:100%;" id="map"></div><br></body>
</html>
This is an example of the example marker that I created which I can use a short code to link to in my plugin, but I can't get scripts to run in the plugin itself with results on the map.
For example when I run this script in my plugin attached to just a plain map.html iframe it doesn't do anything.
I am having an issue disabling scrollwheel zoom in Leaflet Minimap.
I am instantiating the minimap with a centerFixed and a zoomLevelFixed option as per https://github.com/Norkart/Leaflet-MiniMap/pull/95 but I can still zoom with the scroll wheel; Panning is disable though.
The following is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="fullscreen.css" />
<!-- Leaflet -->
<link rel="stylesheet"
href="https://unpkg.com/leaflet#1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.1/dist/leaflet.js"
type="text/javascript"></script>
<!-- Leaflet Plugins -->
<link rel="stylesheet" href="Control.MiniMap.css" />
<script src="Control.MiniMap.js" type="text/javascript"></script>
</head>
<body>
<div id="map" ></div>
<script type="text/javascript">
var map = new L.Map('map', { scrollWheelZoom: false});
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {/*minZoom: 5, maxZoom: 18,*/ attribution: osmAttrib});
map.addLayer(osm);
map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
var osm2 = new L.TileLayer(osmUrl, {/*minZoom: 0, maxZoom: 13,*/ attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2,
{ position: "topright",
centerFixed: [40.7842, -73.9919],
toggleDisplay: true,
zoomLevelFixed: true
}).addTo(map);
</script>
</body>
</html>
I appreciate any guidance in solving this issue. Thank you!
I suppose you should use disable instead of false.
map.scrollWheelZoom.disable();
It will also work when you pass as arguments:
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
scrollWheelZoom: false
});
I want to show location in Google map using JavaScript, but when I zoom out, it shows multiple maps! Also, the map is not fixed in the browser window.
How can I fixate it to the window and force it to show just one map?
<!DOCTYPE html>
<html>
<head>
<title>My Location:</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>
<script type='text/javascript'>
var map;
function loadMap(lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
//scrollwheel: false,
//disableDoubleClickZoom: true,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('my_location'), myOptions);
map.streetViewControl=true;
//window.onresize = google.maps.event.trigger(map, 'resize');
}
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
</script>
</head>
<body onload='loadMap(46.518465, 6.5,45,7)'>
<div class='fd'>
<div class='cd'>
<div id='my_location' class='shadow' style='width:600px;height:260px;'></div>
</div>
</div>
</body>
</html>
Edit :
I have uploaded my page screen shot here :
one : is when my page is loaded.
two : is when I zoom out and resize the window.
three : is when I move map to scroll it.
as you see, in two I have three map ! and in three map didn't fix to its div!
Edit2:
I upload my code!
Your question is not really clear. Could you please provide further explanation of the issue?
Resizing the map on div change
From API reference:
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize') .
All you have to do is trigger this event when your window resizes e.g. window.onresize
Adding listener
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
Displaying the map div
Put this in the <head> of your document.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#my_location{ height: 100% }
</style>
From what I can tell, you are concerned that at the highest zoom levels three copies of the map are shown? This is standard to Google Maps and basically all webmaps. If you don't want that, you could investigate making a custom map with Kartograph.
If you are trying to stop zooming, change to the following code:
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
scrollwheel: false,
disableDoubleClickZoom: true,
minZoom: 1
};
Other than that, I'm not sure what you are asking.
I downloaded the dist dir from leaflet at Girhub
made a site on IIS so that I can reference it but I can not even follow the examples on the demo page.
I'm using asp.net to build my site and have the following in my ASPX page:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<link rel="stylesheet" href="localhost/leaflet.label.css" />
<link rel="stylesheet" href="localhost/MarkerClusters/dist/MarkerCluster.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="localhost/MarkerClusters/dist/leaflet.markercluster-src.js"></script>
<script type="text/javascript">
var map = L.map('map',
{
crs: L.CRS.EPSG4326,
maxBounds: new L.LatLngBounds([-312, -180], [180, 312])
}).setView([0, 0], 0);
var myIcon = L.icon({
iconUrl: 'http://localhost/CustomIcons/Blue.png',
iconSize: [20, 20],
shadowSize: [50, 64],
iconAnchor: [10, 10],
shadowAnchor: [4, 62],
popupAnchor: [0, 0] });
Then this is the part I can't get:
var myMarkerCluster = L.markerClusterGroup({maxClusterRadius: 120});
//try to add markers
var testmarker1 = L.marker(new L.LatLng(0, 0), { icon: myIcon, draggable: false });
var testmarker2 = L.marker(new L.LatLng(10, 10), { icon: myIcon, draggable: false });
myMarkerCluster.addLayer(testmarker1);
myMarkerCluster.addLayer(testmarker2);
map.addLayer(myMarkerCluster);
Now, the odd thing I noticed is that before I added code for the clusters, I was able to right click on the map and get a leaflet pop up with the lat,lon. I have not removed that functionality in code but now, with the cluster code addition, if I right click, then I get a regular browser context menu. I don't understand what's going on and would like to know what's missing from the marker clustering that I'm trying to accomplish. Please advise....
Don't think there is one by default, you need to add context menu to leaflet, try this
http://leafletjs.com/plugins.html
https://github.com/aratcliffe/Leaflet.contextmenu
I'm trying to migrate my application to latest version of Google map API and found that Google appends it's own items by default from Google Places directory to the map.
It does not look right together with my own records as it creates duplicate items on the map which can be placed in correctly.
Is there an option how to hide this local businesses or to control what is shown and what is not?
here is sample code:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(37.422833333333,25.323166666667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
As you can see on map, there are few tiny icons, which you can click on and information would appear in bubble. I need to hide this icons or at least disable on click event for this items.
Just a pointer - this seems possible with custom styled maps. If I'm not mistaken, the feature type you're looking for would be poi.business, whose visiblity you would turn off.
There's a wizard to help you build the options array.
You can remove it by adding the following code:
var styles = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});