Show points from WMS on Leaflet

Question

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

My data look like:

 Columnname:Val1
 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 &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
    }).addTo(map);

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

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" 
 xsi:schemaLocation="http://www.opengis.net/sld 
StyledLayerDescriptor.xsd" 
 xmlns="http://www.opengis.net/sld" 
xmlns:ogc="http://www.opengis.net/ogc" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 <!-- a Named Layer is the basic building block of an SLD document -->
<NamedLayer>
<Name>default_point</Name>
<UserStyle>
<!-- 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 -->
  <FeatureTypeStyle>
 <Rule>
   <PointSymbolizer>
     <Graphic>
       <Mark>
         <WellKnownName>square</WellKnownName>
         <Fill>
           <CssParameter name="fill">#009900</CssParameter>
         </Fill>
       </Mark>
       <Size>12</Size>
       <Rotation>45</Rotation>
     </Graphic>
   </PointSymbolizer>
   </Rule>
  </FeatureTypeStyle>
</UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>

The output

And the Spatial Results from MSSQL

what have you set under 'Coordinate Reference Systems' on the Layer configuration page within GeoServer? — Stephen Lead, Jun 20 '17 at 03: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 03:41
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 07: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 07:55
I posted the issue with coordinates here. Appreciate if you could advise.https://gis.stackexchange.com/questions/244725/show-google-coordinates-in-leaflet-with-wms-geoserver — Mohsen Sichani, Jun 20 '17 at 20:22

score 4 · Accepted Answer · answered Jun 20 '17 at 01:17

4

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'
});

answered Jun 20 '17 at 01:17

Stephen Lead

21,119
17
113
240

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 01: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 01:27
I think the problem is projection, I am working on that – Mohsen Sichani Jun 20 '17 at 03: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 03:59

score 0 · Answer 2 · answered Jan 28 '19 at 18:32

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')?

Show points from WMS on Leaflet

2 Answers2