# Maps

La API de Geodir Maps le permite personalizar mapas con su propio contenido e imágenes para mostrarlos en páginas web y dispositivos móviles. La API de Geodir Maps presenta un mapa básico (mapa de ruta) que puede modificar utilizando capas y estilos, controles y eventos, y varios servicios y bibliotecas.

# Importante

Esta documentación está diseñada para personas familiarizadas con la programación JavaScript (opens new window) y los conceptos de programación orientada a objetos. También debe estar familiarizado con Geodir Maps (opens new window) desde el punto de vista del usuario. Hay muchos tutoriales de JavaScript (opens new window) disponibles en la Web.

Esta documentación conceptual está diseñada para permitirle comenzar a explorar y desarrollar aplicaciones rápidamente con la API de Geodir Maps. También puede revisar la Referencia de la API de JavaScript para Maps (opens new window).

# Formato de Solicitud de API de Maps

La forma más sencilla de empezar a aprender sobre la API de Geodir Maps es ver un ejemplo sencillo. El siguiente ejemplo muestra un mapa centrado:

<!DOCTYPE html>
<html>
	<head>
		<title>Display a map</title>

		<meta charset="utf-8" />		
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css"/>
		<script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>		
	</head>

	<body>
		<div id="map"></div>

		<style>
			body {
			    margin: 0;
			    padding: 0;
			}

			#map {
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    width: 100%;
			}
		</style>

		<script>
			var map = new maplibregl.Map({
			    container: 'map', // id de contenedor
			    style: 'https://apis.geodir.co/maptype/geodir-lightv1?key=YOUR_KEY', // URL de estilo
			    center: [-77.05, -12.05], // posicion inicial [lng, lat]
			    zoom: 13 // zoom inicial
			});
		</script>
	</body>
</html>

Incluso en este simple ejemplo, hay algunas cosas a tener en cuenta:

Declaramos la aplicación como HTML5 usando la declaración <!DOCTYPE html>.
Creamos un elemento div llamado "map" para contener el mapa.
Cargamos la API de JavaScript de Maps mediante una etiqueta script.

Estos pasos se explican a continuación.

# Declarar su Aplicación como HTML5

Le recomendamos que declare un DOCTYPE verdadero dentro de su aplicación web. Dentro de los ejemplos aquí, hemos declarado nuestras aplicaciones como HTML5 usando el DOCTYPE HTML5 simple como se muestra a continuación:

<! DOCTYPE html>

La mayoría de los navegadores actuales mostrarán el contenido declarado con este DOCTYPE en "modo estándar", lo que significa que su aplicación debería ser más compatible con todos los navegadores. El DOCTYPE también está diseñado para degradarse con elegancia; los navegadores que no lo entienden lo ignorarán y utilizarán el "modo peculiar" para mostrar su contenido.

Tenga en cuenta que algunos CSS que funcionan en el modo peculiaridades no son válidos en el modo estándar. En concreto, todos los tamaños basados en porcentajes deben heredar de los elementos del bloque principal, y si alguno de esos antepasados no especifica un tamaño, se supone que tienen un tamaño de 0 x 0 píxeles. Por esa razón, incluimos la siguiente declaración <style>:

<style>
  	body {
		margin: 0;
		padding: 0;
	}

	#map {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	}
</style>

Esta declaración CSS indica que el contenedor de mapas <div> (con id map) debería ocupar el 100% del cuerpo HTML. Tenga en cuenta que también debemos declarar específicamente esos porcentajes para <body>.

# Cargando el API de JavaScript de Maps

El API de Geodir Maps se carga mediante una etiqueta <script>, que se puede agregar en línea en su archivo HTML o dinámicamente usando un archivo JavaScript separado. Le recomendamos que revise ambos enfoques y elija el que sea más apropiado para la forma en que está estructurado el código de su proyecto.

# HTTPS o HTTP

Creemos que la seguridad en la web es muy importante y recomendamos usar HTTPS siempre que sea posible. Como parte de nuestros esfuerzos para hacer que la Web sea más segura, hemos hecho que todas las API de Geodir Maps estén disponibles a través de HTTPS. El uso de la encriptación HTTPS hace que su sitio sea más seguro y más resistente a espionaje o manipulación.

Recomendamos cargar la API de Geodir Maps a través de HTTPS con la etiqueta <script> proporcionada anteriormente.

Si es necesario, puede cargar la API de Geodir Maps a través de HTTP solicitando http://apis.geodir.co.

# Mapa de Elementos DOM

<div id="map"></div>

Para que el mapa se muestre en una página web, debemos reservar un lugar para él. Por lo general, hacemos esto creando un elemento div con nombre y obteniendo una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador.

En el ejemplo anterior, usamos CSS para establecer la altura del div del mapa en "100%". Esto se expandirá para adaptarse al tamaño de los dispositivos móviles. Es posible que deba ajustar los valores de ancho y alto según el tamaño de pantalla y el relleno del navegador. Tenga en cuenta que los divs generalmente toman su ancho de su elemento contenedor, y los divs vacíos generalmente tienen 0 de altura. Por esta razón, siempre debe establecer una altura en el <div> explícitamente.

# Opciones de Mapa

Hay dos opciones obligatorias para cada mapa: center y zoom.

var map = new maplibregl.Map({
	container: 'map', // id de contenedor
	style: 'https://apis.geodir.co/maptype/geodir-lightv1?key=YOUR_KEY', // URL de estilo
	center: [-77.05, -12.05], // posicion inicial [lng, lat]
	zoom: 13 // zoom inicial
});

# Niveles de Zoom

La resolución inicial para mostrar el mapa la establece la zoom propiedad, donde el zoom 0 corresponde a un mapa de la Tierra completamente alejado, y los niveles de zoom más grandes se acercan a una resolución más alta. Especifique el nivel de zoom como un número entero.

zoom: 8

Ofrecer un mapa de toda la Tierra como una sola imagen requeriría un mapa inmenso o un mapa pequeño con muy baja resolución. Como resultado, las imágenes de mapas de Geodir Maps y la API de JavaScript para Maps se dividen en "mosaicos" de mapas y "niveles de zoom". Con niveles de zoom bajos, un pequeño conjunto de mosaicos de mapa cubre un área amplia; a niveles de zoom más altos, los mosaicos tienen una resolución más alta y cubren un área más pequeña. La siguiente lista muestra el nivel aproximado de detalle que puede esperar ver en cada nivel de zoom:

1: Mundo
5: Continente
10: Ciudad
15: Calles
20: Lotes

Obtiene tu Clave API →