Adding Markers in Leaflet.js

Question

I apologise if this is simple but I am not very experienced with this and have read through and adapted multiple examples to get to the point that I'm currently at.

I'm making a map for a campaign that I'm running. I've used leaflet to do this, and after a lot of tinkering I finally got it all working using a single image (which is what I want as it'll be updated a lot).

The next step is to add markers to locations of interest. Now I don't particularly want anything fancy, I was attempting to use markers and popups (as shown here: http://leafletjs.com/examples/quick-start/example-popups.html ) - however the methods I have tried from looking at various examples and tutorials do not seem to be working.

I'll paste my code below and would greatly appreciate anyone who is able to help. Again, I apologise if it is something really simple, all of my limited knowledge is from reading and tweaking examples.

Most of this is built using this tutorial: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

<link rel="icon" type="image/png" href="assets/icon.ico">

<title>Whispers of Valentia</title>         



<link rel="stylesheet" href="map.css" type="text/css" />    

<link href='http://fonts.googleapis.com/css?family=Cantora+One|Acme|Meddon|Jim+Nightshade' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">

</head> 

<body>

    <div id="navigationBar">


        <div id="navigationLogo">

                    <abbr title="This is a test map.">WHISPERS OF VALENTIA</abbr>

        </div>


    </div>

    <div class="shadeBar"></div>


    <div id="image-map" style="background: #1e2831;">


    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<script>

// Using leaflet.js to pan and zoom a big image.

// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

// create the slippy map

var map = L.map('image-map', {

  minZoom: 2,

  maxZoom: 6,

  center: [5000, 2400],

  zoom: 2,

  crs: L.CRS.Simple

});

// dimensions of the image

var w = 10000,

    h = 4800,

    url = 'valentiatest.jpg';

// calculate the edges of the image, in coordinate space

var southWest = map.unproject([0, h], map.getMaxZoom()-1);

var northEast = map.unproject([w, 0], map.getMaxZoom()-1);

var bounds = new L.LatLngBounds(southWest, northEast);


// add the image overlay, 

// so that it covers the entire map

L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image

map.setMaxBounds(bounds);

var marker = L.marker([1000, 1000]).addTo(map);


</script>

    </div>

</body>

Answer 1

You code seems correct. You used the following code to add a marker :

var marker = L.marker([1000, 1000]).addTo(map);

Be aware that this adds a marker to position : latitude : 1000; longitude : 1000;

This is not correct and is not into your map. Add a correct position based on your center to add it .

Look at Leaflet sample code and docs for more informations : http://leafletjs.com/examples/quick-start/

Adding Markers in Leaflet.js

Question

1 answers

solution1
1 ACCPTED 2017-06-12 17:54:47

Adding Markers in Leaflet.js

Question

1 answers

solution1 1 ACCPTED 2017-06-12 17:54:47

solution1
1 ACCPTED 2017-06-12 17:54:47