I have some data in a database and would like to show them on Leaflet, but unfortunately I cannot.

My data look like:

 POINT (-36.389819 174.124343)

and my code:

var map = L.map('map').setView([-36.799907, 174.708520], 11);        
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
         attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'

var mywms = L.Point.wms("http://localhost:9090/geoserver/localhost/wms", {
                 layers: 'localhost:DP_View',
                format: 'image/png',
                 transparent: true,
               version: '1.1.0'

Seems L.Point does not have a method for WMS, not sure how I can show these data on the map with a popup. I am able to see this data as PreviewLayer in GeoServer.

What I have tried so far:

 Changed WMS style as suggested

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 
 <!-- a Named Layer is the basic building block of an SLD document -->
<!-- Styles can have names, titles and abstracts -->
  <Title>Default Point</Title>
  <Abstract>A sample style that draws a point</Abstract>
  <!-- FeatureTypeStyles describe how to render different features -->
  <!-- A FeatureTypeStyle for rendering points -->
           <CssParameter name="fill">#009900</CssParameter>

The outputenter image description here

And the Spatial Results from MSSQL enter image description here

  • what have you set under 'Coordinate Reference Systems' on the Layer configuration page within GeoServer? – Stephen Lead Jun 20 '17 at 3:13
  • I am putting 3857 as I got these data from GoogleAPI. I changed srcname to ' SrsName: 'EPSG:3857' have added an screenshot. Thank you Stephen. By the way, I am seeing the marker on top of the map after modifying the code a bit, – Mohsen Sichani Jun 20 '17 at 3:41
  • 1
    Don't change the projection here you will confuse GeoServer (as you can see in the Lat/Lon bbox). Leaflet will request the data in 3857 and GeoServer will reproject it to that from 4326 automatically – Ian Turton Jun 20 '17 at 7:48
  • Thank you Iant, even it is confusing for me:), so you are suggesting me to select Native ... in the drop box, and do not compute anything, right? Many thanks – Mohsen Sichani Jun 20 '17 at 7:55
  • I posted the issue with coordinates here. Appreciate if you could advise.gis.stackexchange.com/questions/244725/… – Mohsen Sichani Jun 20 '17 at 20:22

See http://leafletjs.com/reference-1.0.3.html#tilelayer-wms for instructions on adding a WMS layer. In your case this will probably be something like:

var mywms = L.tileLayer.wms("http://localhost:9090/geoserver/localhost/wms", {
    layers: 'localhost:DP_View',
    format: 'image/png',
    transparent: true,
    version: '1.1.0'
| improve this answer | |
  • I tried that before, does not work, I can not see anything. Possibly because points are too small even with zooming, seems there is no layer. Thank you for your consideration – Mohsen Sichani Jun 20 '17 at 1:20
  • You could try creating a style which uses a large symbol for the point. Or use WFS and GeoJSON as in this example – Stephen Lead Jun 20 '17 at 1:27
  • I think the problem is projection, I am working on that – Mohsen Sichani Jun 20 '17 at 3:01
  • 1
    I am still working on the projection, but the solution as you suggested is using tilelayer. thank you for your consideration and thoughtfulness, – Mohsen Sichani Jun 20 '17 at 3:59

You can use QGIS (Quantum GIS software) to display the SQLServer layer, then put simple symbols and labels then save the SLD file to use it in GeoServer as a default style for this layer. It's not good to use localhost as a name of Workspace in GeoServer ('localhost:DP_View')? QGIS:Save SLD File

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.