Desde que Google a drásticamente reducido los cupos gratis de su servicio de Maps, obligando sus usuarios a ingresar sus datos de tarjeta de crédito para cobrar en caso de excederles, muchos han buscado otras alternativas. No es la primera vez que Google reduce, a través del tiempo los cupos gratis de sus servicios, como lo hizo en su tiempo con Gmail, por lo tanto, no es una mala idea buscar desde ya una alternativa.
Con eso en la mente hemos creado este ejemplo que demuestra el uso de Open Layers en un caso bastante común que es mostrar marcadores en un mapa, algo que hemos hecho para nuestros clientes en el rubro del corretaje de propiedades o bienes raíces.
Este ejemplo, ver aquí, fue escrito en VB.NET con una base de datos SQL Server. En el archivo ZIP ubicado aquí viene todo: el proyecto y un respaldo de la bd .
En el HTML
En el Header la parte CSS
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css" />
<link rel="stylesheet" href="css/ol-popup.css" type="text/css" />
En el Body
<div>
<div id="map" class="map" style="width:100%;height:550px;"></div>
<asp:Literal ID="litPopup" runat="server"></asp:Literal>
</div>
Y luego la parte JS
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<asp:Literal ID="litJS" runat="server"></asp:Literal>
En la parte VB.NET
Luego de haber leído la información desde la table de la base de datos
Crea un popup por ciudad utilizando la clave para identificar popup para hacerles único
sPopup = sPopup & "<div id=""popup" & objRdr("C_ID") & """ ol-popup""><a href=""#"" id=""popup-closer" & objRdr("C_ID") & """ ol-popup-closer""></a><div id=""popup-content" & objRdr("C_ID") & """></div></div>"
'----- Inicio creacion del script para ubicar los marcadores sobre el mapa
' Cada capa (layer), contenedor (container), contenido (content), cierre (closer) viene con la clave unica del registro
sLine = sLine & "var layer" & objRdr("C_ID") & " = new ol.layer.Vector({source: new ol.source.Vector({features: [new ol.Feature({ " & vbCrLf
' Se especifica las coordenadas geograficas ¡OJO! tiene que ser latitud y longitud lo que es al reves de Google Maps
sLine = sLine & "geometry: new ol.geom.Point(ol.proj.fromLonLat([" & objRdr("C_Long") & "," & objRdr("C_Lat") & "]))} " & vbCrLf
sLine = sLine & ")]}),style:pStyle}); " & vbCrLf
sLine = sLine & "map.addLayer(layer" & objRdr("C_ID") & "); " & vbCrLf
sLine = sLine & "var container" & objRdr("C_ID") & " = document.getElementById('popup" & objRdr("C_ID") & "'); " & vbCrLf
sLine = sLine & "var content" & objRdr("C_ID") & " = document.getElementById('popup-content" & objRdr("C_ID") & "'); " & vbCrLf
sLine = sLine & "var closer" & objRdr("C_ID") & " = document.getElementById('popup-closer" & objRdr("C_ID") & "'); " & vbCrLf
sLine = sLine & "var overlay" & objRdr("C_ID") & " = new ol.Overlay({ " & vbCrLf
sLine = sLine & " element: container" & objRdr("C_ID") & ", " & vbCrLf
sLine = sLine & " autoPan: false, " & vbCrLf
sLine = sLine & " autoPanAnimation: {duration: 250 " & vbCrLf
sLine = sLine & "} " & vbCrLf
sLine = sLine & "}); " & vbCrLf
sLine = sLine & "map.addOverlay(overlay" & objRdr("C_ID") & "); " & vbCrLf
sLine = sLine & "closer" & objRdr("C_ID") & ".onclick = function() { " & vbCrLf
sLine = sLine & " overlay" & objRdr("C_ID") & ".setPosition(undefined); " & vbCrLf
sLine = sLine & " closer" & objRdr("C_ID") & ".blur(); " & vbCrLf
sLine = sLine & " return false; " & vbCrLf
sLine = sLine & "}; " & vbCrLf
'----- Final creacion del script para ubicar los marcadores sobre el mapa
'----- Inicio creacion del script para cargar la informacion en cada popup
' Se verifica cual capa (layer) fue pinchada
If sLine2 = "" Then
sLine2 = sLine2 & " if (layer === layer" & objRdr("C_ID") & ") { " & vbCrLf
Else
sLine2 = sLine2 & " } else if (layer === layer" & objRdr("C_ID") & ") { " & vbCrLf
End If
'------ Inicio carga de la informacion
sLine2 = sLine2 & " content" & objRdr("C_ID") & ".innerHTML = '"
' Carga del nombre de la ciudad
sLine2 = sLine2 & If(IsDBNull(objRdr("C_Titulo")), "", "<b>" & CStr(objRdr("C_Titulo"))) & "</b><br />"
' Carga del nombre de la descripcion
If Not IsDBNull(objRdr("C_Descripcion")) Then
sDescripcion = Replace(objRdr("C_Descripcion").ToString, vbLf, "<br />")
sDescripcion = Replace(sDescripcion, vbCr, "")
Else
sDescripcion = ""
End If
sLine2 = sLine2 & If(sDescripcion = "", "", "<span ol-detalles"">" & sDescripcion & "</span>")
' Carga de la imagen
sLine2 = sLine2 & If(IsDBNull(objRdr("C_Imagen")), "", "<img ol-img"" alt=""" & If(IsDBNull(objRdr("C_Titulo")), "", CStr(objRdr("C_Titulo"))) & """ src=""Images/" & CStr(objRdr("C_Imagen")) & """>")
' Carga de la informacion cierre
sLine2 = sLine2 & "';" & vbCrLf
'------ Carga de la informacion
sLine2 = sLine2 & " overlay" & objRdr("C_ID") & ".setPosition(coordinate); " & vbCrLf
sLine3 = sLine3 & " overlay" & objRdr("C_ID") & ".setPosition(undefined); " & vbCrLf
sLine3 = sLine3 & " close" & objRdr("C_ID") & ".blur(); " & vbCrLf
Loop
objRdr.Close()
' Se carga la parte fija del javascript
Dim sr As StreamReader
sr = File.OpenText(Server.MapPath("js1.txt"))
Dim strContents As String = sr.ReadToEnd()
sr.Close()
' Se junta toda la informacion
Dim sLine4 As String = ""
' Se prepara la parte que controla a donde se clickea en el mapa
sLine4 = " map.on('singleclick', function (event) { " & vbCrLf
sLine4 = sLine4 & " var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {" & vbCrLf
sLine4 = sLine4 & " var coordinate = event.coordinate;" & vbCrLf
sLine4 = sLine4 & sLine2
sLine4 = sLine4 & " } return feature;" & vbCrLf
sLine4 = sLine4 & " });" & vbCrLf
sLine4 = sLine4 & " if (!feature) {" & vbCrLf
sLine4 = sLine4 & sLine3
sLine4 = sLine4 & " }" & vbCrLf
sLine4 = sLine4 & " });" & vbCrLf
' Carga del javascript
litJS.Text = "<script>" & strContents & vbCrLf & sLine & sLine4 & "</script>"
' Carga del popup
litPopup.Text = sPopup