Giter VIP home page Giter VIP logo

Comments (4)

kartenkarsten avatar kartenkarsten commented on June 23, 2024

it shouldn't be too difficult - modify the callback function. Nominatum returns a lon lat position which is accessable by

var center = [results[0].lat, results[0].lon];

to set a marker should work by

var marker = L.marker(center);
this._map.addLayer(marker);

but it doesn't - seams like my break in JS develloping was to long

from leaflet-control-osm-geocoder.

ajzeigert avatar ajzeigert commented on June 23, 2024

Hm. I tried a couple variations on that and couldn't get it to work. I'll keep trying. Thanks for the idea!

from leaflet-control-osm-geocoder.

pmacMaps avatar pmacMaps commented on June 23, 2024

Here's a solution I came up with. You could use a standard marker instead of the Leaflet Awesome Markers plugin shown in the example.

var searchBounds;
var  addressSearchResults;

// OSM Geocoder
osmGeocoder = new L.Control.OSMGeocoder({
        collapsed: false,
        position: 'topright',
        text: 'Search',
        placeholder: 'Enter address',
        bounds: searchBounds,
        callback: function(results) {
            // add a message on the screen about not finding an address (future step)
            if (results.length == 0) {
	       console.log("ERROR: didn't find a result");				
	   }
            
            // clear previous geocode results
            addressSearchResults.clearLayers();
            
            // create icon for result
            var addressSearchIcon = L.AwesomeMarkers.icon({
                icon: 'map',
                prefix: 'fa',
                markerColor: 'orange',
                iconColor: '#fff'
             });
            
            // get coordinates for result
            var coords = L.latLng(results[0].lat,results[0].lon);
        
            // create a marker for result
            var marker = L.marker(coords, {
                icon: addressSearchIcon
            });
            
            // add result object to map and zoom to 
            addressSearchResults.addLayer(marker);            
            this._map.addLayer(marker).setView(coords,17);  
            
            // open pop-up for location
            var popup = L.popup({closeOnClick: true}).setLatLng(coords).setContent(results[0].display_name).openOn(map);
        }
    }).addTo(map);

from leaflet-control-osm-geocoder.

ramnikgc avatar ramnikgc commented on June 23, 2024

Try this code it's working with marker postion. <script type="text/javascript">
var markers = {};

function setMarkers(data) {
  data.BMS.forEach(function (obj) {
	if (!markers.hasOwnProperty(obj.id)) {
	  markers[obj.id] = new L.Marker([obj.lat, obj.long]).addTo(map);
	  markers[obj.id].previousLatLngs = [];
	} else {
	  markers[obj.id].previousLatLngs.push(markers[obj.id].getLatLng());
	  markers[obj.id].setLatLng([obj.lat, obj.long]);
	}
  });
}
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
var map = new L.Map('map').addLayer(osm).setView([48.5, 2.5], 15);

var searchBounds;
var osmGeocoder = new L.Control.OSMGeocoder({
	collapsed: false,
	placeholder: 'Search location...',
	bounds: searchBounds,
	callback: function (results) {
		var bbox = results[0].boundingbox,
		first = new L.LatLng(bbox[0], bbox[2]),
		second = new L.LatLng(bbox[1], bbox[3]),
		bounds = new L.LatLngBounds([first, second]);					
						
		if (results.length == 0) {
		   console.log("ERROR: didn't find a result");				
		}				
			
		var center = [results[0].lat, results[0].lon];
		console.log(center);
		var json = {
			  "BMS":[{
				"id": 'A',
				"lat": results[0].lat,
				"long":  results[0].lon,
				"text": "<h2>Hôtel Ibis 1</h2><a href='#'>view</a><p>Rte Nationale 250 1 imp Bosquet, 33260 L</p>"
			  }]
			}
		setMarkers(json);
		map.flyTo(center, 10);						
		this._map.fitBounds(bounds);
	}
});
map.addControl(osmGeocoder);

</script>`

from leaflet-control-osm-geocoder.

Related Issues (7)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.