gubi/README.md

## README.md

      
    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.

🙏

  
## 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>

## package.json
{
  "dependencies": {
    "leaflet": "^1.9.4"
  }
}
	<!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>