Skip to content

Commit

Permalink
add mapicgc examples to raster+vector+terrain
Browse files Browse the repository at this point in the history
  • Loading branch information
@lstiz
lstiz committed Feb 13, 2025
1 parent 419cbae commit 9066dc3
Show file tree
Hide file tree
Showing 9 changed files with 1,221 additions and 0 deletions.
207 changes: 207 additions & 0 deletions exemples/mapicgcgljs/icgc-basemap-mapicgc-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
<html lang="ca">

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GR9JCZYNFH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-GR9JCZYNFH');
</script>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
const f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-MGS4TSP');
</script>
<!-- End Google Tag Manager -->
<title>Exemple estils vector ICGC i MapICGC GL JS</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ICGC" />
<meta name="description" content="Exemple Leaflet">
<meta name="robots" content="index,follow">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous">
</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style>
body {
margin: 0;
}

.soft {
background-color: #f7f7f7
}

.titol {
padding: 15px
}

.container {
border: 1px solid #f7f7f7
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
list-style-type: decimal !important;
}
</style>
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MGS4TSP" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container">
<div class="pro">
<div class="titol">
<strong>Exemple estils vector ICGC i MapICGC GL JS</strong>
<br>
<div>
<p>
<a target="_blank"
href="https://github.com/OpenICGC/OpenICGC.github.io/blob/master/exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html">Veure
codi font
<i class="fab fa-github"></i></a>
<a href="/exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html">pantalla completa <i
class="fas fa-expand"></i></a>
</p>
</div>
</div>
</div>
<iframe src="/exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html" frameborder=0 width="100%" height="500"></iframe>
<hr>
<div class="soft">
<pre><code class="prettyprint linenums">
&#x3C;html&#x3E;
&#x3C;head&#x3E;
&#x3C;meta charset='utf-8'/&#x3E;
&#x3C;title&#x3E;Exemple estils vector ICGC i MapICGC GL JS&#x3C;/title&#x3E;
&#x3C;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/&#x3E;
&#x3C;script src="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.js"&#x3E;&#x3C;/script&#x3E;
&#x3C;link href="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet"/&#x3E;
&#x3C;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&#x3E;
&#x3C;style&#x3E;
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%
}
#menu {
position: absolute;
z-index: 1000;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
top: 5px;
left: 5px;
border-radius: 7px;
-webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
}
&#x3C;/style&#x3E;
&#x3C;/head&#x3E;
&#x3C;body&#x3E;
&#x3C;div id='menu'&#x3E;
&#x3C;input id='icgc_mapa_estandard' type='radio' name='rtoggle' value='icgc_mapa_estandard' checked='checked' /&#x3E;
&#x3C;label for='icgc_mapa_estandard'&#x3E;Mapa estàndard&#x3C;/label&#x3E;&#x3C;br /&#x3E;
&#x3C;input id='icgc_mapa_base_gris' type='radio' name='rtoggle' value='icgc_mapa_base_gris' /&#x3E;
&#x3C;label for='icgc_mapa_base_gris'&#x3E;Mapa base gris&#x3C;/label&#x3E;&#x3C;br /&#x3E;
&#x3C;input id='icgc_delimitacio_estandard' type='radio' name='rtoggle' value='icgc_delimitacio_estandard' /&#x3E;
&#x3C;label for='icgc_delimitacio_estandard'&#x3E;Delimitació estàndard&#x3C;/label&#x3E;&#x3C;br /&#x3E;
&#x3C;input id='icgc_xarxa_viaria_estandard' type='radio' name='rtoggle' value='icgc_xarxa_viaria_estandard' /&#x3E;
&#x3C;label for='icgc_xarxa_viaria_estandard'&#x3E;Xarxa viària estàndard&#x3C;/label&#x3E;&#x3C;br /&#x3E;
&#x3C;input id='icgc_arees_poblament' type='radio' name='rtoggle' value='icgc_arees_poblament' /&#x3E;
&#x3C;label for='icgc_arees_poblament'&#x3E;Àrees poblament&#x3C;/label&#x3E;&#x3C;br /&#x3E;
&#x3C;input id='icgc_orto_hibrida' type='radio' name='rtoggle' value='icgc_orto_hibrida' /&#x3E;
&#x3C;label for='icgc_orto_hibrida'&#x3E;Orto híbrida&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
&#x3C;div id="map"&#x3E;&#x3C;/div&#x3E;
&#x3C;script&#x3E;

async function initMap() {
const data = await mapicgcgl.Config.getConfigICGC();
const map = new mapicgcgl.Map({
container: "map",
style: data.Styles.TOPO,
center: [2.1464, 41.306],
zoom: 7.4,
maxZoom: 19,
hash: true,
pitch: 0,
});
map.on("load", () => {
map.addFullscreenControl()
map.addNavigationControl()
map.addAttributionControl({ compact: true });
map.addGeolocateControl(
{
positionOptions: {
enableHighAccuracy: true,
},
trackUserLocation: true,
}
);

})
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');

function switchLayer(layer) {
const layerId = layer.target.id;
map.setStyle('https://geoserveis.icgc.cat/contextmaps/' + layerId + '.json');
}

for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}

}
initMap();

&#x3C;/script&#x3E;
&#x3C;/body&#x3E;
&#x3C;/html&#x3E;
</code></pre>
</div>
</div>
</body>

</html>
104 changes: 104 additions & 0 deletions exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<html>

<head>
<meta charset='utf-8 ' />
<title>Exemple estils vector ICGC i MapICGC GL JS</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.js"></script>
<link href="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%
}

#menu {
position: absolute;
z-index: 1000;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
top: 5px;
left: 5px;
border-radius: 7px;
-webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
}
</style>
</head>

<body>
<div id='menu'>
<input id='icgc_mapa_estandard' type='radio' name='rtoggle' value='icgc_mapa_estandard' checked='checked' />
<label for='icgc_mapa_estandard'>Mapa estàndard</label><br />
<input id='icgc_mapa_base_gris' type='radio' name='rtoggle' value='icgc_mapa_base_gris' />
<label for='icgc_mapa_base_gris'>Mapa base gris</label><br />
<input id='icgc_delimitacio_estandard' type='radio' name='rtoggle' value='icgc_delimitacio_estandard' />
<label for='icgc_delimitacio_estandard'>Delimitació estàndard</label><br />
<input id='icgc_xarxa_viaria_estandard' type='radio' name='rtoggle' value='icgc_xarxa_viaria_estandard' />
<label for='icgc_xarxa_viaria_estandard'>Xarxa viària estàndard</label><br />
<input id='icgc_arees_poblament' type='radio' name='rtoggle' value='icgc_arees_poblament' />
<label for='icgc_arees_poblament'>Àrees poblament</label><br />
<input id='icgc_orto_hibrida' type='radio' name='rtoggle' value='icgc_orto_hibrida' />
<label for='icgc_orto_hibrida'>Orto híbrida</label>
</div>

<div id="map"></div>
<script>

async function initMap() {
const data = await mapicgcgl.Config.getConfigICGC();
const map = new mapicgcgl.Map({
container: "map",
style: data.Styles.TOPO,
center: [2.1464, 41.306],
zoom: 7.4,
maxZoom: 19,
hash: true,
pitch: 0,
});
map.on("load", () => {
map.addFullscreenControl()
map.addNavigationControl()
map.addAttributionControl({ compact: true });
map.addGeolocateControl(
{
positionOptions: {
enableHighAccuracy: true,
},
trackUserLocation: true,
}
);


})
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');

function switchLayer(layer) {
const layerId = layer.target.id;
map.setStyle('https://geoserveis.icgc.cat/contextmaps/' + layerId + '.json');
}

for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}

}
initMap();


</script>
</body>

</html>
Loading

0 comments on commit 9066dc3

Please sign in to comment.