Skip to content

Instantly share code, notes, and snippets.

@gubi

gubi/README.md

Last active January 27, 2024 19:19
Show Gist options
  • Save gubi/2394cc00f13ceb2e4d2681dc0ff6e9f0 to your computer and use it in GitHub Desktop.
Save gubi/2394cc00f13ceb2e4d2681dc0ff6e9f0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Oh, Venerably Most Holy Ninux Map Lords...

Please check-out this sample and grant us a Ninux map update... 🙏🙏🙏

We are ninuxers that want to use the map on http://map.ninux.org/ but we dislike the authority control

This is a base working FOSS HTML > Leaflet + .geojson map. Use this for all your projects, but please update the Ninux Map

@see https://gis.stackexchange.com/questions/68489/loading-external-geojson-file-into-leaflet-map

 

INSTALL

Simply digit $ npm install in your root dir to fetch the leaflet engine.

 

TECHNICAL NOTE

If you get issues displaying the map, please consider your CORS permissions.

@see https://help.openstreetmap.org/questions/87587/suddenly-throwing-cors-error-on-open-street-map-api-calls#87589

and also CORS solutions here:

@see https://help.openstreetmap.org/questions/38308/osm-tile-server-how-to-enable-cors

 

Consider the creation of a Ninux Web Tile Server
@see here https://operations.osmfoundation.org/policies/nominatim/

NOTE

Actually Google maps does not works unless Ninux.org users release their own control to Google's cookie-telemetry-trackers.

Are Ninux.org map sponsored by Google Inc?
It's Ninux.org a property-of or used-by Google LLC?
I hope not, but even if so, insert the key and let it work.

So please, use only the FOSS way.
And may the Force be with you.
🙏

Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<style>
html, body, #map {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 100%"</div>
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<!-- <script src="ninux_nodes.geojson" type="text/javascript"></script> -->
<!-- <script src="hydro_s_example.geojson" type="text/javascript"></script> -->
<!-- <script src="hydro_l_example.geojson" type="text/javascript"></script> -->
<script type="text/javascript">
var map = L.map('map', {
center: [45.57, -73.5648],
zoom: 10
});
/* Geojson layers example */
// var hydro = new L.LayerGroup();
// L.geoJson(hydro_s_example, {style: hydrosStyle}).addTo(hydro);
// L.geoJson(hydro_l_example, {style: hydrolStyle}).addTo(hydro);
// L.geoJson(ninux_nodes).addTo(map);
L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap Contributors. Tiles courtesy of Humanitarian OpenStreetMap Team'
}).addTo(map);
// var featureStyle = {
// "color": "#ff7800",
// "weight": 5,
// "opacity": 0.2
// };
// Add a marker
var marker;
map.on('locationfound', function(ev){
if (!marker) {
marker = L.marker(ev.latlng);
} else {
marker.setLatLng(ev.latlng);
}
})
map.locate({setView: true})
.on('locationerror', function(e){
console.log(e);
alert("Location access has been denied.");
});
</script>
</body>
</html>
Raw
package.json
{
"dependencies": {
"leaflet": "^1.9.4"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment