Simple Leaflet Map with line

Free Zones et zones Industrielles de Tanger

Exemple de code  en Javascript pour publier en page web une carte contenant les zones free et industrielles de Tanger- Maroc.

Cette carte a 3 cartes de fond dont une image satellite ; pour les visualiser cliquez sur le bouton en haut à droite.

Pour afficher les usines dans chaque zone, il suffit de cliquer sur l’un des boutons en bas.

  • Outils utilisés: WordPress, Leaflet, jQuery, sublime.

<head>

    <title>Simple Leaflet Map with line</title>

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

    <link rel= »stylesheet » href= »https://geossc.ma/wp-content/themes/iamsocial-child/css/style_zones.css »/>

    <style>

        #maCarte{

            height: 500px;

        }

    </style>

</head>

<body>

    <h4> Free Zones et Industrielles de Tanger</h4>

    <div id= »maCarte »></div>

 <div id= »controls » style= »margin: 15px; »>

                               <button class= »btn toggle » id= »toggleButTFZ »>Entreprises TFZ</button>

                               <button class= »btn toggle » id= »toggleButgz »> Entreprises Guznaya</button>

                               <button class= »btn toggle » id= »toggleButmg »> Entreprises Mghougha</button>

                               <button class= »btn toggle » id= »toggleButTAC »> Entreprises TAC</button>

                </div>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/societ_tfz.js »> </script>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/zone_urbaine.js »> </script>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/zig.js »> </script>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/gz_delimit.js »> </script>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/mg_delimit.js »> </script>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/zim.js »> </script>

<script src= »https://geossc.ma/wp-content/themes/iamsocial-child/js/tac.js »> </script>

   <script src= »http://cdn.leafletjs.com/leaflet-0.7/leaflet.js »></script>

  <script>

    var map = L.map(‘maCarte’).setView([35.7095, -5.8511], 11);

        mapLink = ‘<a href= »http://openstreetmap.org »>OpenStreetMap</a>’;

    var osm = L.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {

            attribution: ‘&copy; ‘ + mapLink + ‘ Contributors’,

            maxZoom: 18,

            }).addTo(map);

    // esri basemap

    var esri=L.tileLayer(‘http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}’) //URL pour obtenir des tuiles

            .addTo(map);

        mapLinkesri = ‘<a href= »http://www.esri.com/ »>Esri</a>’;

        wholink = ‘i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community’;

    var aerial= L.tileLayer(

            ‘http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}’, {

            attribution: ‘&copy; ‘+mapLinkesri+’, ‘+wholink,

            maxZoom: 18,

            }).addTo(map);

//add a points data icon

    var usineIcon= new L.Icon({

        iconUrl: »http://tanger.cartes.geossc.ma/wp-content/uploads/2019/04/icon_usine.png »,

        iconSize:[15,15]

    });

    //var popupConent= « <h2>Tanger »+feature.properties.Zone + « </h2 »

       // + « <p> Information société: </p> »

        //+ « <ul><li>Nom: » + feature.properties.Nom + »</li></ul> »;

    function usine(feature, layer){

        layer.bindPopup(« <h3> Zone industrille:</h3 »

        + « <p> « +feature.properties.Zone +  » </p> »

        + « <ul><li>Nom: » + feature.properties.Nom + »</li></ul> »);

        layer.setIcon(usineIcon);

    };

    var zoneUrbaineSymbol={

        « color »: »#ffff62″,

        « fillColor »: »#488D52″,

        « fillOpacity »:0.2

    };  

    var zoneUrbaine = L.geoJson(zone_urbane,{

        style:zoneUrbaineSymbol

    }).addTo(map);

    var societePoints = L.geoJson(societ_tfz,{

            onEachFeature: usine

                }).addTo(map);

    var zigSocietes= L.geoJson(zig,{

                    onEachFeature: usine

                }).addTo(map);

     var zimSocietes= L.geoJson(zi_mghougha,{

                    onEachFeature: usine

                }).addTo(map);

    var tacSocietes= L.geoJson(tac,{

                    onEachFeature: usine

                }).addTo(map);

    var mgDelimit=L.geoJson(mg_delimit, {

            style:zoneUrbaineSymbol

        }).addTo(map);

    var gzDelimit=L.geoJson(gz_delimit,{

        style:zoneUrbaineSymbol

    }).addTo(map);      

    var baseLayers={

        « OpenStreetMap »:osm,

        « ESRI World Topo Map »:esri,

        « Aerial image »:aerial

    };

    var  overlays={

        « TFZ »:societePoints,

        « Zone Urbaine-2015 »:zoneUrbaine,

        « Délimitation ZIG »:gzDelimit,

        « ZI Guznaia »:zigSocietes,

        « Délimitation ZIM »:mgDelimit,

        « ZI Mghougha »:zimSocietes,

        « Tanger Automotive City »:tacSocietes

    };

    L.control.layers(baseLayers,overlays).addTo(map);

    // Function to add societe

        function addSocietes(){

            map.addLayer(societePoints);

        };

    // Function to remove societe

        function removeSocietes(){

            map.removeLayer(societePoints);

        };

     // Function to toggle societe

        function toggleSociete(){

            if(map.hasLayer(societePoints)){

                removeSocietes();

            } else {

                addSocietes();

            }

        };

     // Function to toggle societe

        function toggleSociete_zig(){

            if(map.hasLayer(zigSocietes)){

                map.removeLayer(zigSocietes);

            } else {

                map.addLayer(zigSocietes);

            }

        };

        //function to switch mgougha societes

        function toggleMghougha(){

            if(map.hasLayer(zimSocietes)){

                map.removeLayer(zimSocietes);

            } else {

                map.addLayer(zimSocietes);

            }

        };

        //function to switch mgougha societes

        function toggle_tac(){

            if(map.hasLayer(tacSocietes)){

                map.removeLayer(tacSocietes);

            } else {

                map.addLayer(tacSocietes);

            }

        };

        jQuery(document).ready(function ($) {

        // Use $( « elementID ») and the jQuery click listener method to add on the add button

       $(« #addButton »).click(function() {

            addSocietes();

        });

        // Use $( « elementID ») and the jQuery click listener method to remove on the remove button

        $(« #removeButton »).click(function() {

            removeSocietes();

        });

        // Use $( « elementID ») and the jQuery click listener method to toggle on the toggle button

        $(« #toggleButTFZ »).click(function() {

            toggleSociete();

        });

  // Use $( « elementID ») and the jQuery click listener method to toggle on the toggle button

        $(« #toggleButgz »).click(function() {

            toggleSociete_zig();

        });

        $(« #toggleButmg »).click(function() {

            toggleMghougha();

        });

        $(« #toggleButTAC »).click(function() {

            toggle_tac();

        });

        });

    </script>

</body>

le code css pour les boutons:

html, body{
height: 90%;
width: 100%;
}

map{

height: 90%;
width: 100%;
}

controls{

height: 80%;
width: 100%;
text-align: center;
margin-top: 460px;
position: relative;

}

map{

background-color: #bcbcbc;

}

.btn {
border: 2px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: « montserrat »;
cursor: pointer;
margin: 10px;

}
.toggle{
color: #3498db;
position: relative;
}