Leaflet

a marqué ce sujet comme résolu.

Bonjour, Je cherche à intégrer un JSON à 2 points simple dans un leaflet. Le frame leaflet est affiché vide au lancement dans chrome, et l’image ne s’affiche pas. Voyez vous le pb du programme (voir ci-dessous) … ? Merci de votre aide. 

<!DOCTYPE html>
<html>
    <head>
    
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Carte with 2 points</title>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
        <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>
    
    </head>
    <body>

        <h1>Démo</h1>
        <div id="map" style="height: 800px; border: 1px solid #AAA;"></div>
                
        <script>
        markers = [
            {
                "name": "Point 1",
                "lat": 48.2,
                "lng": 2.9,
            },
            {
                "name": "Point 2",
                "lat": 48.0,
                "lng": 3.2,
            }
        ];
                
        //Init
            var map = L.map( 'map', {
                center: [48.1, 3.0],
                minZoom: 1,
                zoom: 12
            });

        </script>
        <script>

        //Init marker
                
            var redIcon = L.icon({
                    iconSize: [25,41]
            });

            L.tileLayer( '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'to be defined',
                subdomains: ['a','b','c']
            }).addTo( map );


            //popup
                
            for ( var i=0; i < markers.length; ++i )
            {
            L.marker([markers[i].lat, markers[i].lng],
            {
                icon: redIcon
               }).addTo(map);
            }       

        </script>
    </body>
</html>
+0 -0

Merci !

J’ai changé CSS et JS, mais ca ne fonctionne pas mieux. Il y a affichage du cadre de la page mais pb de connexion à unpkg. 

<!DOCTYPE html>
<html>
    <head>
    
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Carte with 2 points</title>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
        <script type="text/javascript" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    
    </head>
    <body>

        <h1>Démo</h1>
        <div id="map" style="height: 800px; border: 1px solid #AAA;"></div>
                
        <script>
        markers = [
            {
                "name": "Point 1",
                "lat": 48.2,
                "lng": 2.9
            },
            {
                "name": "Point 2",
                "lat": 48.0,
                "lng": 3.2
            }
        ];
                
        //Init
            var map = L.map( 'map', {
                center: [48.1, 3.0],
                minZoom: 1,
                zoom: 12
            });

        </script>
        <script>

        //Init marker
                
            var redIcon = L.icon({
                    iconSize: [25,41]
            });

            L.tileLayer( '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'to be defined',
                subdomains: ['a','b','c']
            }).addTo( map );


            //popup
                
            for ( var i=0; i < markers.length; ++i )
            {
            L.marker([markers[i].lat, markers[i].lng],
            {
                icon: redIcon
               }).addTo(map);
            }       

        </script>
    </body>
</html>
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte