Hot answers tagged

17

The L.Tooltip class includes a className option (inherited from the DivOverlay class), which will be converted into a CSS class when the tooltip is displayed. e.g.: L.marker(latlng).addTo(map).bindTooltip('Text', {className: 'myCSSClass'}); Then, it's just a matter of defining that CSS class. The tip is a bit tricky, as it needs working with pseudo-...


7

You can create a more complex JavaScript function to create your div and call it when ever you want in your html document : <script> function expr(field, class_name) { return "CASE WHEN \"" + field + "\" IS NOT NULL THEN '" + class_name + "' ELSE '0' END" }; function is_circle() { var circle_expr = expr("125", "circle"); ...


6

You need to override white-space property of leaflet-tooltip class. Additionally, you may set the width of the tooltip as well. Just add this after your leaflet.css file .leaflet-tooltip{ width: 100px; white-space: normal; } Here is a working example


6

You asked about OpenLayers map but tagged Leaflet also. If you are open to leaflet, here is an example: Map from GeoJSON, that reads from a GeoJSON file using JQuery and plots the points as circleMarkers, it has a popup and will zoom to the extents of the points: http://www.gistechsolutions.com/leaflet/DEMO/Drink/Drink.html This example needs to run from ...


5

I figured it out with the prompt from user30184. Nulls are indeed ignored and must be explicitly included in the CSS or SLD filter, something I should have expected... but didn't for some reason (lack of caffeine?). So my CSS snippet becomes: /* buildings */ [aeroway <> 'terminal'],[aeroway is Null]{ fill: #aa1111; } This has been tested and works ...


5

If you still have the reference to your marker, simply use marker.options to access the options object assigned to it. In your case: marker.options.draggable.


5

Use a table: <table> <th colspan=2><h1>ASSET</h1></th> <tr><td class="bold">NAME:</td><td>[% "First Name" %] [% "Surname" %]</td></tr> <tr><td class="bold">COMPANY NAME:</td><td>[% "Company Na" %]</td></tr> [...] </table>


5

I couldn't get your strategy that both custom-popup and leaflet-popup-content-wrapper style classes have overflow: auto property to work properly. I moved overflow: auto property to leaflet-popup-content style class which is applied only to inner content of popup. Here is working solution that has been tested on IE11 and latest versions of Firefox and ...


4

There's a plugin called Leaflet.label which does what you want: https://github.com/Leaflet/Leaflet.label


4

Outside of polling for size changes, there isn't a way to detect a resize of a <div>. I usually use absolute positioning on the map container and let Leaflet handle resize automatically. Like this: http://jsfiddle.net/asnyder14/0gsfdxeg/


4

Probably this page of the GeoServer CSS Manual.


4

The width of the map tip box is computed without looking at all the data content and is therefore unlikely to fit. You can however set it to a known good size: <style> h1 {color:red; width:300px;} </style> <h1>[% "MyField" %]</h1>


4

Leaflet's choropleth example is an excellent place to understand coloring by attributes. I didn't change the example much - just followed your sample. // color by attribute. woas2 = L.geoJSON(data, { style: function(feature) { d = feature.properties.colorByAttr; return d > 1000 ? {color: '#00FF7F', opacity:0.7} : ...


4

Your question has already been asked here before. Nevertheless: There is a 'position' option in several elements in Leaflet like L.control to specify where in the map the element should appear. Look in your index.html where the L.control.layers is defined and add {position: 'topleft'} For example: L.control.layers(layers, basemaps, {position: 'topleft'...


3

The CSS plugin does a CSS to SLD conversion, the opposite is not always possible as long as CSS cascading is enabled. On the current developer series (GeoServer 2.9.x) we have a directive to disable cascading, e.g., @mode "Simple"; at the top of the file, that would allow one to write a SLD -> CSS translator... but it's not there yet. Contributions ...


3

This was added as a new feature in Leaflet just a few days ago. That feature will be part of the v1.0.0-rc2 release. Also, your method works well, as demonstrated here.


3

var viewer = new Cesium.Viewer('cesiumContainer'); var credit = new Cesium.Credit('Title', '../images/facility.gif', 'http://www.cesiumjs.org'); viewer.scene.frameState.creditDisplay.addDefaultCredit(credit)


3

After the container size is changed you have to update the map size and recalculate bounds: map.updateSize(); You can check the OL documentation http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize


3

I am having the same issue in Google Chrome. Everything works correctly in Mozilla or IE. Here is my CSS definition of the div where the map is loading. .map { height: 35em; width: 100%; border-radius: 5px; border: 0.2em solid #209CA6; } When I go full screen this happens: I realized that reason why this is happening is the fixed setting of the height of ...


3

Building on the answer by IvanSanchez, you can add a class to a layer: var layer = L.featureGroup([]); layer.style({'className': 'mask'}) then in CSS path.leaflet-interactive.mask {cursor: crosshair}


3

If your data it truly Null (and not a white space), then use IS NULL to detect it. [%CASE WHEN "Local Pl_1" IS NULL THEN 'No Data Available' end%] If the content of the field Local Pl_1 is to be displayed if it set (i.e. it is not null for some records), you can instruct QGIS to show it: [%CASE WHEN "Local Pl_1" IS NULL THEN 'No Data Available' ELSE "...


3

Try coalesce() <h1> [%"Local Auth"%] </h1> <h3> Date LAP Adopted</h3> <p> [% coalesce("Local Pl_1", 'No Data Available') %] </p> <h3> Five Year Housing Supply</h3> <p> [% "5 YHLS (#)" %] </p>


3

Have you tried L.EasyButton? It's quick and easy, although the buttons can contain only icons out of the box. There's plenty of useful examples and demos on site. If that doesn't suit your needs, you'll have to extend Leaflets L.control class. Let me know and I'll try to work up an example using L.Control


3

You can add labels in CARTO.js using CartoCSS text properties in your layer style object. Something like this should work: #layer { polygon-fill: #826DBA; polygon-opacity: 0.9; } #layer::outline { line-width: 1; line-color: #FFFFFF; line-opacity: 0.5; } #layer::labels { text-name: [name]; text-face-name: 'DejaVu Sans Book'; text-size: 10; ...


3

To create different individual drive time buffers you can't use BUILDER, as it's not parametrized by a field. Instead, you need to use SQL directly to UPDATE your dataset with the geometries. So if your field for the commute time is commute_time then your query would look like the following queries. Mind that I'm putting the points as latitude/longitude to ...


3

Calling map.updateSize() is the right solution, but it's not enough. It has to be called at the right time, after side menu animation is finished. The simples solution is to use setTimeout call with the proper delay. Code would then look something like this: function w3_open() { document.getElementById("main").style.marginLeft = "25%"; document....


3

To fit the map to the full screen in Openlayers, you should adjust your css code like this: #map { position: fixed; top: 0; left: 0; bottom: 0; right: 0; }


2

try .leaflet-popup-content img { margin: 0 auto; display:block; }


2

I found the solution : var search = document.getElementById('suche'); search.appendChild(new L.Control.GeoSearch({ provider: new L.GeoSearch.Provider.OpenStreetMap(), }).onAdd(map));


2

You could just add another standard marker to see the correct location: http://jsfiddle.net/expedio/my565p1m/ If the location of your divIcon is ok, remove the standard marker again ;)


Only top voted, non community-wiki answers of a minimum length are eligible