How to mimic leaflet default panel buttons - javascript

I am working on a leaflet application and would like to mimic the default draw control panel buttons to move them to a more convient location on my application. The icons in question being these
I can see the objects within the drawcontrol I just don't know how to invoke these methods
Thanks so much

I found the solution, the primary call looks like so
this.polyline.enable(); for the draw functions, meaning that marker would look like
this.marker.enable();
defined as
this.polyline = new L.Draw.Polyline(this.map, { shapeOptions: { color: 'green' } });
this.marker = new L.Draw.Marker(this.map, {icon: new mark()});
same goes with the other polys to add to the map, zoom-in/out is also this.map.zoomIn; this.map.zoomOut respectively

Related

Having trouble combining hover state and click to zoom capability (fitToBounds?)

Extreme beginner here. I found this (https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) tutorial that does the first part of what I'm trying to do (hover effect on US States) but I would like to add the ability to click on a state and have the map zoom to the bounds of that state.
Basically looking to do something like this https://leafletjs.com/examples/choropleth/ but in mapbox gl.
Many thanks, even if only pointing out where I should start.
You can use map.on('click', <layer-name> ... to set up your click listener. This example should help you with the structure: https://www.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/
In order to properly use fitBounds within the listener, you'll need to "convert" the raw polygon coordinates to a mapgoxgl.LngLatBounds object. This example does it for a LineString (but the approach can be adapted to work with a polygon): https://www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/
Without knowing the names of your layers, I can recommend something that looks roughly like the following:
map.on('click', 'state-fills', function(e) {
var coordinates = e.features[0].geometry.coordinates[0];
var bounds = coordinates.reduce(function(bounds, coord) {
return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, {
padding: 20
});
});

How do I display a popup showing feature attributes from a Geoserver WMS layer in a leaflet map?

I'm pretty new to Leaflet and I'm trying to get some pretty basic (or so I thought) functionality on my webmap. In short, I have many (179) WMS layers hosted on Geoserver and I would like the user to be able to click any feature and display a popup showing information about the feature.
I have 179 layers each representing the polygon footprints of paper map sheets for the map library I work for. Each of the layers represents one "series" of maps in the collection. The attribute fields for each layer are identical. Some of the features are stacked on top of one another (multiple records for different editions of the same map). To give you an idea of what I'm interested in creating, here is a link to my pilot application (showing just 3 of the layers) I made in ArcGIS online. Forgive the elementary HTML, it was just an example to show what I needed to do.
I have created a leaflet map displaying two of the layers and I would like to add the other layers once I figure out this functionality.
Is it possible to make a popup that can show information from multiple features from multiple layers?
Can I control the attributes which are displayed in the popup?
Would it be easier to do some kind of "info window" rather than popups?
Really, any suggestions to keep me from giving up on this project would be much appreciated.
var map;
function mapinitialize() {
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
});
map = new L.Map('map',
{
center: new L.LatLng(46, -90),
zoom: 6,
layers: [osm],
zoomControl: true
});
//This is all for the layer control:
var f0999 = new L.TileLayer.WMS(GEOSERVERBASE + "/geoserver/Geodex/wms",
{
layers: "Geodex:f0999",
format: 'image/png',
styles: 'F0999',
transparent: true,
attribution: ""
});
var f0177 = new L.TileLayer.WMS(GEOSERVERBASE + "/geoserver/Geodex/wms",
{
layers: "Geodex:f0177",
format: 'image/png',
styles: 'F0177',
transparent: true,
attribution: ""
});
var baseMaps = {
"osm": osm
};
var overlayMaps = {
"f0999 Messing Around Layer": f0999,
"f0177 Nautical Charts": f0177
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
//End layer control
The current popup:
map.on('click', function(e){
var popupContent = "You have clicked the map at " + e.latlng.lat + ", " + e.latlng.lng;
var marker = new L.marker(e.latlng).addTo(map)
.bindPopup(popupContent)
.openPopup();
});
}
All the references to popups in leaflet I can find are assigned to markers, and as you can see in the code, I have been able to assign a popup to a marker.
Ideally, I would like to place a marker where the user clicks and display attributes for the features underneath. The intention is that a user can use this application to query what maps we have for a specific area.
If you are using the 7.X version of leaflet, there isn't direct support for this in the box. Luckily for all of us, the library supports customization through plugins and object extension well.
Personally, I've adapted this example for a similar need. It wouldn't accommodate showing details for multiple layers, but with some additional customization that could be accomplished. You'd definitely be able to control what attributes are shown.It extends the framework provided WMS tile layer adding the ability to do a WMS GetFeatureInfo request which is at the heart of what you need.
It seems like GeoServer's OpenLayers backed layer preview feature does do this, but the results are loaded in another div, not a popup. OpenLayers might support this more in-the-box if you prefer not to get your hands too dirty.
Also, if using a WFS layer is an option you would have a much easier time attaching an onclick event using that layer's onEachFeature event. If the number of features were small, you could bind popups to the data you want to show -- with an onclick listener to show the popup when clicked. I can provide some examples of this if it's interesting.

HTML Link to a Leaflet / Mapbox marker

I use Mapbox for a dynamic map on a website. It works really well except, I have a sidebar which list the pins with a little more description and an image. I want to make it so when I click on that sidebar, it would fire the click event of that marker on the map.
I used to do this all the time with Google Maps but now I'm stuck because even in the case that I can keep the instance of the marker, I cannot fire the click on it for some reason. It simply does nothing (maybe I need to re-bind the click event on it but I don't know how with mapbox)
I've encountered a few questions about this on Google and SO but none bring a real answer to that question except "keep the instance" which isn't always possible in some cases.
So basically I have a jQuery click event like this:
var marker = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
properties: {}
};
if (isPin) {
marker.properties = pinStyles.pin;
} else if (isWinery) {
marker.properties = pinStyles.winery;
} else {
marker.properties = pinStyles.user;
}
marker.properties.title = locationName;
marker.properties.description = pin.description;
var markerObject = L.mapbox.markerLayer(marker);
// Add to cluster
markers.addLayer(markerObject);
$('#marker_list a.marker_item:last').click(function() {
var geoJson = markerObject.getGeoJSON();
markerObject.fire('click'); // does nothing (openPopup makes "Uncaught TypeError: Object [object Object] has no method 'openPopup' " so I guess I'm not doing it right)
});
And I have this (click event for mapbox marker):
map.markerLayer.on('click', function(e) {
map.setView(e.layer.getLatLng(), map.getZoom());
});
Anyone has an idea about wether 1) fix the non-firing event OR 2) make an HTML link fire a mapbox marker click event OR .openPopup?
Thanks and have a nice day!
MapBox's marker layer is a collection of Leaflet markers. You can create an href to a function that look for a particular marker based on it's layer id.
map.markerLayer.getLayers() returns an array of layer objects that contain both a _leaflet_id and the method togglePopup.
Try matching your href call to the leaflet id and then fire map.markerLayer.getLayers()[i].togglePopup()
Let me know if this helps.

Google Maps API markers and zoom

I'm relativ new to the Google Maps API.
My situation: Website with an fullscreen Google map as background.
First problem: If the user scrolls down, or zooms out too much, there is an gray background. Is it possible to limit the max zoom-out, and that he can't scroll out? Or maybe repeat the map vertical (with markers).
If it's possible to set the max zoom-out and lock him within the map, how could I dynamically calculate the max zoom-out releated to the screen-resolution?
Second problem: Is it possible to add custom javascript to a marker?
Example: I create 5 markers, each one should hold an custom value (ID from the database). On click my own function should be called with the custom value as parameter and do some stuff.
Edit: This is what I mean with grey: (vertical "end" of google maps)
Map object have propert maxZoom, set it when map created
yes it is possible, you can add click events, change popups open, and since it is javascript you can add any additional data just as simple as markr.MyData = 'something interesting'
I am not sure what gray part you mean? I can't see gray parts with max and min zoom in google maps
Okay. Got it finally working! :)
Fixing grey area (handles also zooming):
function setBounds() {
google_allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-85.000, -122.591),
new google.maps.LatLng(85.000, -122.333));
google_lastCenter = google_map.getCenter();
google_lastZoom = google_map.getZoom();
google.maps.event.addListener(google_map, "bounds_changed", function () {
checkBounds();
});
google.maps.event.addListener(google_map, 'center_changed', function () {
checkBounds();
});
}
function checkBounds() {
if (google_allowedBounds.getNorthEast().lat() > google_map.getBounds().getNorthEast().lat()) {
if(google_allowedBounds.getSouthWest().lat() < google_map.getBounds().getSouthWest().lat()) {
google_lastCenter = google_map.getCenter();
google_lastZoom = google_map.getZoom();
return true;
}
}
google_map.panTo(google_lastCenter);
google_map.setZoom(google_lastZoom);
return false;
}
Marker click handler:
google_listener = google.maps.event.addListener(marker, 'click', markerHandler);
function markerHandler(event) {
window.console.log(this);
}

Google maps not being interactive

Hey, I just started using Google maps, and am having a problem. Adding overlays is working fine. If I add controls (zoom, left/right etc.), they are also working fine. But Googlemaps isn't allowing me to drag, even if I set map.enableDragging(). It also won't respond to any of my GEvent.addListeners. I've looked on other sites, and there's supposed to be a hand icon on mouseover to drag and click and such, and all I have is my pointer. Am I doing something wrong? Parts of my code:
The declaration of the map. EnableDragging is supposed to be default, and it's not even working when I call the function to set it to true.
Boozemap.map = new GMap2( $('#map_mapholder').get(0));
Boozemap.map.enableDragging();
The function to add a marker, which makes the marker show up, but not be interactive:
Boozemap.addBCMarker = function(lat, lng)
{
var point = new GLatLng(lat, lng);
var icon = new GIcon();
icon.image = absoluteFilepath("images/fstar.png");
icon.iconSize = new GSize(25, 25);
icon.iconAnchor = new GPoint(140, 25);
var bcmarker = new GMarker(point, icon);
GEvent.addListener(bcmarker, 'click', function(){alert('clicked!')});
Boozemap.map.addOverlay(bcmarker);
}
Any and all help would be lovely, thanks!
I figured it out, but it's kind of weird. The majority of my map was indeed getting covered, but it was getting covered by the copyright div that's built into the google API. I'm pretty sure I can fix it through CSS, but it seems strange that google would mess up like that, so I'm assuming I did something wrong. Is there a google maps API CSS that I'm supposed to include, or something?
Thanks to all those who helped.

Categories