Tengo un mapa turístico (estación de esquí) con edificios y carreteras en formato .jpg. Es un problema porque el norte está abajo y el sur está arriba (es ese tipo de mapa dibujado con una montaña dibujada arriba en el mapa donde en realidad está el sur).
Tengo que ponerlo en la página web y también poner algunos pines.
¿Qué herramientas y medios me recomiendan? Hay que hacerlo rápido así que por favor dame algunas soluciones simples si es posible.
Utilizando OpenLayers puede colocar un mapa en cualquier lugar de su sitio web que muestre únicamente su mapa en formato jpg (sin capas de base). La imagen deberá tener la mayor resolución posible. Si no es así, tendrá problemas para hacer zoom sin obtener una imagen terriblemente pixelada.
Aquí está el código de ejemplo con el que puedes construir tu mapa. También tendrá que mirar el OpenLayers Marcadores ejemplos para ver cómo se pueden integrar los pines en el mapa ;) Documentación al respecto aquí .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ski Map</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
map {
width: 800px;
height: 500px;
}
</style>
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var graphic = new OpenLayers.Layer.Image(
'Ski Map', //layer alias
'http://link.to.ski.map.jpg', //link to your ski map image
new OpenLayers.Bounds(-180, -88.759, 180, 88.759), // global bounds, dont change this
new OpenLayers.Size(resolutionX,resolutionY) //resolution of your image in X,Y pixel size
);
map.addLayer(graphic); //add image layer to map
map.addControl(new OpenLayers.Control.LayerSwitcher()); //add some map controls
map.zoomToMaxExtent(); //zoom out to ski maps extent
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
También puede utilizar un simple mapa de imágenes . Requiere menos código (en realidad es cero código, sólo marcado), el inconveniente es que los mapas de imágenes no son ampliables.
También hay sitios web herramientas (búsqueda Google para otros) para editar el mapa de la imagen, aliviando así el dolor de escribir a mano las áreas.
I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.
3 votos
¿Gimp? ¿O tienes algún otro requisito que no nos hayas dicho?
0 votos
Tengo que añadir alfileres como he dicho, pero con ventanas de información. Y después tener la opción de agrupar esos pines para poder seleccionar por ejemplo restaurantes y mostrar sólo aquellos pines que mostrarán restaurantes.