Marker image style

SpatialFocus · Sep 11, 2023 · c9cebf7 · c9cebf7
1 parent 0c6ec21
commit c9cebf7
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ https://openlayers-blazor-demo.laurent-christen.ch/
     <head>
     ...
         <link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
-        <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
+        <link href="_content/SpatialFocus.OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>
     ...
     </head>

diff --git a/src/OpenLayers.Blazor.Demo.Maui/wwwroot/index.html b/src/OpenLayers.Blazor.Demo.Maui/wwwroot/index.html
@@ -9,7 +9,7 @@
     <link href="css/app.css" rel="stylesheet" />
     <link href="OpenLayers.Blazor.Demo.Maui.styles.css" rel="stylesheet" />
     <link href="lib/openlayers/ol.css" rel="stylesheet" />
-    <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
+    <link href="_content/SpatialFocus.OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
     <script src="lib/openlayers/dist/ol.min.js"></script>
 </head>
 

diff --git a/src/OpenLayers.Blazor.Demo.Server/Pages/_Host.cshtml b/src/OpenLayers.Blazor.Demo.Server/Pages/_Host.cshtml
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
-    <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
+    <link href="_content/SpatialFocus.OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>
     <link href="OpenLayers.Blazor.Demo.Server.styles.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.png"/>

diff --git a/src/OpenLayers.Blazor.Demo/wwwroot/index.html b/src/OpenLayers.Blazor.Demo/wwwroot/index.html
@@ -10,7 +10,7 @@
     <link href="css/app.css" rel="stylesheet"/>
     <link href="OpenLayers.Blazor.Demo.styles.css" rel="stylesheet"/>
     <link href="lib/openlayers/ol.css" rel="stylesheet"/>
-    <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet"/>
+    <link href="_content/SpatialFocus.OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet"/>
     <script src="lib/openlayers/dist/ol.min.js"></script>
     <link rel="icon" type="image/png" href="favicon.png"/>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/dark.min.css" rel="stylesheet"/>

diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs
@@ -268,7 +268,6 @@ public async Task OnInternalFeatureClick(Internal.Feature feature)
         _popupContext = f;
         await OnFeatureClick.InvokeAsync(f);
         StateHasChanged();
-
     }
 
     [JSInvokable]
@@ -324,7 +323,7 @@ public async Task OnInternalRenderComplete()
     {
         await OnRenderComplete.InvokeAsync();
     }
-    
+
     /// <summary>
     ///     Passes the center coordination to underlying map
     /// </summary>

diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
@@ -643,9 +643,9 @@ MapOL.prototype.setVisibleExtent = function (extent) {
 //--- Styles -----------------------------------------------------------------//
 
 MapOL.prototype.pinStyle = function (marker) {
-    var src = './_content/OpenLayers.Blazor/img/marker-pin-red.png';
+    var src = './_content/SpatialFocus.OpenLayers.Blazor/img/marker-pin-red.png';
     if (marker.color == null || marker.color != '#FFFFFF')
-        src = './_content/OpenLayers.Blazor/img/marker-pin-'+marker.color+'.png';
+        src = './_content/SpatialFocus.OpenLayers.Blazor/img/marker-pin-'+marker.color+'.png';
     return [
         new ol.style.Style({
             image: new ol.style.Icon({
@@ -656,7 +656,7 @@ MapOL.prototype.pinStyle = function (marker) {
                 scale: marker.scale,
                 anchorXUnits: 'pixels',
                 anchorYUnits: 'pixels',
-                src: './_content/OpenLayers.Blazor/img/pin-back.png'
+                src: './_content/SpatialFocus.OpenLayers.Blazor/img/pin-back.png'
             })
         }),
         new ol.style.Style({
@@ -771,9 +771,23 @@ MapOL.prototype.customImageStyle = function (marker) {
                 anchorXUnits: 'pixels',
                 anchorYUnits: 'pixels',
                 src: marker.content
-                })
             })
-        ];
+        })
+    ];
+}
+
+MapOL.prototype.imageStyle = function (marker) {
+    return [
+        new ol.style.Style({
+            image: new ol.style.Icon({
+                opacity: 1,
+                scale: 0.75,
+                anchorXUnits: 'pixels',
+                anchorYUnits: 'pixels',
+                src: marker.get("content")
+            })
+        })
+    ];
 }
 
 MapOL.prototype.lineStyle = function (line) {
@@ -813,7 +827,7 @@ MapOL.prototype.getGeoStyle = function (feature) {
     var that = this;
 
     var geoStyles = {
-        'Point': that.awesomeStyle(feature),
+        'Point': that.imageStyle(feature),
         'LineString': new ol.style.Style({
             stroke: new ol.style.Stroke({
                 color: 'green',