Project OneMap-Leaflet JS (Alpha- Open Source)

Hi everyone,

We are initialising a new open-source library based on leaflet. We are in the midst of evolving the project with other components in mind.

Hi Everyone,

Team OneMap has made another commit into OneMap-Leaflet Repository.

New Capabilities:

  1. Convert Point Themes directly into GeoJSON with a single line of code

  2. Convert KML String into GeoJSON

  3. Do movement tracking

Now you could use a simple script and get the effects you want.

//Initialize OneMap and select one style
					//The parameters are Div name,Map style(default,night grey,original),Zoom, Latitude, Longitude and Opacity
				var map = onemap.initializeMap('map',"default",11,1.3,103.8,0.8);

				//Add Layer at the back
				var backLayer = onemap.addBackLayer(map,L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
					            			detectRetina: true,
											attribution: '© OpenStreetMap contributors',
											maxZoom: 18,
					            			minZoom: 0,
					            			opacity:1
										}));

				//Add Layer at the front
				var frontLayer = onemap.addFrontLayer(map,L.tileLayer("https://maps-{s}.onemap.sg/v3/PACDC/{z}/{x}/{y}.png", {
					            			detectRetina: true,
											attribution: '© OneMap',
											maxZoom: 18,
					            			minZoom: 0,
					            			opacity:0.5
										}));

				//Layer to be removed later
				var removeLayer = onemap.addFrontLayer(map,L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
					            			detectRetina: true,
											attribution: '© OpenStreetMap contributors',
											maxZoom: 18,
					            			minZoom: 0,
					            			opacity:1
										}));
				//Removed Layer from Map
				onemap.removeLayer(map,removeLayer);

				//Setup configuration for REST API Services
				onemap.config("eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMzNywidXNlcl9pZCI6MzM3LCJlbWFpbCI6ImthaWthaWNvbmdAZ21haWwuY29tIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTExMjQ2NzQzLCJleHAiOjE1MTE2Nzg3NDMsIm5iZiI6MTUxMTI0Njc0MywianRpIjoiZDg2OWFmZTYzNDRiM2JhYmY2MWEyN2VhMWQwMjg3YjgifQ.LcHgH06vJS46wsRuGVdSldC47y05bECuto3VI1kgGQo");

				//Call Theme Services
				var themeObj = onemap.retrieveTheme("kindergartens");

    			//Convert Themes that are Points into GeoJSON for overlaying
    			var data = onemap.pointTheme2GeoJSON(themeObj);

    			//Add GeoJSON to map
    			var geojson = L.geoJSON(data, {});
				
				geojson.addTo(map);

Hi,

I am a total noob on java script.

  1. In OneMap-Leaflet script, instead of obtaining the theme objects via the function call retrieveTheme, is it possible for me to define my own objects to be passed into pointTheme2GeoJSON instead?

  2. And next, I had defined my own geojson object to be added into the map [L.geoJSON], I had the marker icon, whilst the map was not loaded.

my geojson object:

var data = {

“type”: “Feature”,

“properties”: {

“NAME”: “ABC”,

“DESCRIPTION”: “Kindergartens”,

“ICON”: “./school.gif”

},

“geometry”: {

“type”: “Point”,

“coordinates”: [1.34593563504576,103.853311673433]

}

};

Again can I pass my own geojson objects into your script?

  1. I appreciate if you would show me an example whereby I can consume the pointTheme2GeoJSON with my own objects. And having that output to be passed into Leaflet geoJSON function.

thanks

Hello,

The trick is to loop through your objects, form a valid geojson and add it to map.

var allFeatures = [];

allFeatures.push({
type: “Feature”,
properties:{
“NAME”:“CC”,
“DESCRIPTION”:“This is a CC”,
“ICON”:“https://assets.onemap.sg/icons/youricon.gif
},
geometry:{
type: “Point”,
coordinates:[103.8,1.3]
}
});

var geojson = {type: “FeatureCollection”,features:allFeatures}

geojson.addTo(map);

Thanks.

With below code, the 3 icons will be shown on the map.

var data = [];

data.push({

type: “Feature”,

properties:{

“NAME”:“CC”,

“DESCRIPTION”:“This is a CC”,

“ICON”:"./school.gif"

},

geometry:{

type: “Point”,

coordinates:[103.846911241497,1.37279081671099]

}

});

data.push({

type: “Feature”,

properties:{

“NAME”:“CC2”,

“DESCRIPTION”:“This is a CC2”,

“ICON”:"./school.gif"

},

geometry:{

type: “Point”,

coordinates:[103.851873942231,1.3679998880978]

}

});

data.push({

type: “Feature”,

properties:{

“NAME”:“CC3”,

“ICON”:"./school.gif"

},

geometry:{

type: “Point”,

coordinates:[103.819650880153,1.45065508162837]

}

});

             //Add GeoJSON to map

              var geojson = L.geoJSON(data, {onEachFeature: function (feature, layer) {layer.bindPopup('<h1>'+feature.properties.NAME+'</h1><p>Description: '+feature.properties.DESCRIPTION+'</p>');

                

                 //Sets Icon information

                var icon = L.icon({

                                iconUrl: feature.properties.ICON

                            });

                layer.setIcon(icon)

                 }});

             

            

                geojson.addTo(map);

                //Fit bound to markers

                map.fitBounds(geojson.getBounds());
1 Like

Hi

I have used the below code to initialize the ( Latitude, Longitude) (1.3093796, 103.8620187) on the map , but I’m unable to view the plot on the map.

var map = onemap.initializeMap(‘map’, “default”, 20, 1.3093796, 103.8620187, 0.8);

Thanks in advance.

Hi @Itsupport,

Is your onemap-leaflet.js is added and initialised?

Could you show us your code including that line?

Hi Kyriskoh,

Have added onemap-leaflet.js and initialized with the below code:

var map = onemap.initializeMap(‘map’, “default”, 20, 1.3093796, 103.8620187, 0.8);

I believe this piece of code will highlight the place with the Latitude - 1.3093796 and the Longitude 103.8620187 on One Map.

Hi ,

Can you please help me with the code to display the popup with the details: Below is the Piece of code written:
var map = onemap.initializeMap(‘map’, “default”, 11, 1.3, 103.8, 0.8);

				//Add Layer at the back
				var backLayer = onemap.addBackLayer(map,L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
					            			detectRetina: true,
											attribution: '© OpenStreetMap contributors',
											maxZoom: 18,
					            			minZoom: 0,
					            			opacity:1
										}));

				//Add Layer at the front
				var frontLayer = onemap.addFrontLayer(map,L.tileLayer("https://maps-{s}.onemap.sg/v3/PACDC/{z}/{x}/{y}.png", {
					            			detectRetina: true,
											attribution: '© OneMap',
											maxZoom: 18,
					            			minZoom: 0,
					            			opacity:0.5
										}));

				//Layer to be removed later
				var removeLayer = onemap.addFrontLayer(map,L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
					            			detectRetina: true,
											attribution: '© OpenStreetMap contributors',
											maxZoom: 18,
					            			minZoom: 0,
					            			opacity:1
										}));
				//Removed Layer from Map
				onemap.removeLayer(map,removeLayer);

				//Setup configuration for REST API Services (Your Access Token)
				//Our Documentation @  https://docs.onemap.sg
				onemap.config("eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIxMTEsInVzZXJfaWQiOjIxMTEsImVtYWlsIjoiaXRzdXBwb3J0QG5ldHdvcmtjb3VyaWVyLmNvbS5zZyIsImZvcmV2ZXIiOmZhbHNlLCJpc3MiOiJodHRwOlwvXC9vbTIuZGZlLm9uZW1hcC5zZ1wvYXBpXC92MlwvdXNlclwvc2Vzc2lvbiIsImlhdCI6MTU0MjU5MjAxNCwiZXhwIjoxNTQzMDI0MDE0LCJuYmYiOjE1NDI1OTIwMTQsImp0aSI6ImYxMjUwZWRjZjQ2ZmIyZGQ3OTJmODlmNzNhNDVmMzMwIn0.ks857EM8VIAW69vpl87wlrQraTeKwZ_px9luVcDs2Yw");


var data = [];
				data.push({
				    type: "Feature",
				    properties:{
                     "ICON": "./marker-icon.png"
				},
				    geometry:{
				    type: "Point",
				    coordinates: [103.9282325, 1.3260877]
				}
				});


				var geojson = L.geoJSON(data, {});

                                     geojson.addTo(map);

				
				map.fitBounds(geojson.getBounds());

image

A pop up like the one which can be seen on your map

Hi Itsupport,

You can bind a popup to the marker. Afterwards, this marker can be added to your map object.

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

Regards,
Kai