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: ‘© ‘ + 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: ‘© ‘+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;
}