Hot answers tagged

11

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


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

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

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


4

Probably this page of the GeoServer CSS Manual.


4

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


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

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

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

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

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

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


2

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


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

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.


2

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)


2

This is done in the Leaflet code by using the cursor CSS property, see https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css#L193


2

Checked again, I finally noted the issue is in the GetLegendGraphic response. The default behavior is that if there is a single rule in the output GeoServer won't add the title, assuming the client will do the labelling instead, while there are multiple ones, the title is always added, because the client cannot do so in an intelligent way. This is ...


2

ArcGIS Server is not required for this kind of capability. A hosted feature service in your ArcGIS Online account should suffice depending on how much data you want to visualise. However what is required is knowledge of CSS and the ArcGIS Javascript API in order to replicate, along with a web server like Amazon S3 to host the web application which could ...


2

you will have to add a second category with no data to allow geoserver show the legend title, for example in QGIS:


2

You can, I would suggest removing the brackets from the [color] with the code as below; [userid = 1] { stroke: color; stroke-width: 3px; stroke-linecap: round; z-index: 0, 1; } This tutorial provides a similar code block


2

The problem was finally found, under the hood... After trying a bunch of different usual suspect fonts, started to wonder why the fc-list command returned no information - there were absolutely no fonts installed on the server! Since I needed to use a bunch of specific MS fonts, this seemed to do the trick: wget http://www.itzgeek.com/msttcore-fonts-2.0-3....


2

In CSS, percentage units refer to the parent DOM element. In your HTML+CSS code, you're setting the map (<div id="map" class="container border-solid-black">) to 100% of its parent (<div class="row soft-padding margin-zero" >), but you are giving a height to the grandparent (<div class="col-xs-12 col-sm-9 margin-zero map-padding">) ...


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