locked
leaflet map content not showing RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1045082127 posted

    hi there .

    everything is ok and all stuff contain data but no map is visible :

    bindMap(data,chart){
		var greenIcon = L.icon({
			iconUrl:  'images/marker-icon.png',
			//shadowUrl:  'images/marker-icon.png',
		
			iconSize:     [20, 30], // size of the icon
			shadowSize:   [50, 64], // size of the shadow
			iconAnchor:   [8, 29], // point of the icon which will correspond to marker's location
			shadowAnchor: [4, 62],  // the same for the shadow
			popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
		});

		var element=chart.selector.replace('#','');
		var map =L.map(element);		
		
		L.tileLayer(
			'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
			maxZoom: 18
			}).addTo(map);

		var center = [29.608088,52.530853];
		map.setView(center, 3);
		
		for(var i=0;i<data.lat.data.length;i++){
			center = [data.lat.data[i][1],data.lng.data[i][1]];			
			L.marker(center, {icon: greenIcon}).addTo(map).bindPopup("Lat: "+data.lat.data[i][1]+"<br/>Lon: "+data.lng.data[i][1]);//.openPopup();;
			
		}

		setInterval(() => {
			map.invalidateSize();
		}, 500);
		  
	}

    it seems this element wont showing data. if i set to other element no problems . how can I solve anything related to this div element?

    Sunday, October 11, 2020 12:24 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1330468790 posted

    Hi aminsoraya,

     

    Looks like the codes are correct and should be working. 

    I did a test with above codes using simulation data from official tutorial. (https://leafletjs.com/examples/quick-start/)

    It worked perfectly.

    I suspect that the problem might be caused by 

    • codes error: a) wrong data set (latitude and longitude) b) use a wrong element (This needs more information/codes to judge.)
    • no access to the layer url . (I removed the url for tile layer and it rendered nothing)

    For the first guess, you  might need to provide more information/codes for targeting the problem.

    For the second guess, you could check if you have access to the tile layer url.

     

    My working codes are as below. You could provide me with more details (codes or other useful information):

    <head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #mapid { height: 180px; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="mapid">
        </div>
    </form>
    <script>
        // Simulating data for the map to test the codes
        var data = {
            // lat.data[i][1] as latitude
            lat: {
                data: [
                    [0, 51.509],
                    [0, 51.503],
                    [0, 51.51]
                ]
            },
            // lng.data[i][1] as longtitude
            lng: {
                data: [
                    [0, -0.08],
                    [0, -0.06],
                    [0, -0.047]
                ]
            }
        };

        
        bindMap(data);


        function bindMap(data) {

            var greenIcon = L.icon({
                iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
                //shadowUrl:  'images/marker-icon.png',

                iconSize: [20, 30], // size of the icon
                shadowSize: [50, 64], // size of the shadow
                iconAnchor: [8, 29], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            //var element = chart.selector.replace('#', '');
            var map = L.map('mapid');

            L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
                maxZoom: 18
            }).addTo(map);

            var center = [29.608088, 52.530853];//[51.505, -0.09];
            map.setView(center, 3);

            for (var i = 0; i < data.lat.data.length; i++) {
                center = [data.lat.data[i][1], data.lng.data[i][1]];
                L.marker(center, { icon: greenIcon }).addTo(map).bindPopup("Lat: " + data.lat.data[i][1] + "<br/>Lon: " + data.lng.data[i][1]);//.openPopup();;

            }

            setInterval(() => {
                map.invalidateSize();
            }, 500);

        }
    </script>
</body>

    Demo:

     

    Best regards,

    Sean

    Monday, October 12, 2020 7:18 AM