socib / Leaflet.TimeDimension

Add time dimension capabilities on a Leaflet map.
MIT License
435 stars 138 forks source link

How do I add a moving marker to my current code? #177

Open Slebbog opened 4 years ago

Slebbog commented 4 years ago

Hello Is there any easy way I can get a simple marker that is moving on the map on a scripted path? I would really really appreciate if anyone could help, at least point me towards where I can see how to do this. I tried looking at the examples but they are all way too complicated for me.

This is my current code below:

<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>
<script type="text/javascript" src="iso8601.js"></script>
<script type="text/javascript" src="leaflet.timedimension.min.js"></script>
<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>