Custom HTML+Javascript map/google maps
Budget: €30 – €250 EUR
English:
I need a pure JS or JS+jQuery map html component. You can use google maps.
Functional info:
I have 2 JSON lists. Each list contains an array of objects. An object have 5 attributes or more if you need:
- ID
- Label
- Label text
- Longitude
- Latitude
The maps should show List 1 elements in the map.
- The map must show the shortest route to visit the sites shown in the List 1. A simply example with 5 points in list 1 is fine.
- List 2 are elements that you can add to the map. A simple example with 5 points in list 2 is fine.
- For each point in list 1 the map should show label and label text.
- User can remove elements (that element is moved from list 1 to list 2).
- User can add list 2 elements to the map (that element is moved from list 2 to list 1 and shown in the map).
- User can change the order to visit the elements. In that case the map show a new route (in that case the route is not the shortest route).
Technical info:
- It should be a index.html file with a <div> for the map and other <div> for each label list that I can run in local (like mostly examples available in the web).
- No custom design needed, so it can be as simple as you want. Anything basic is fine (I think you need some css to positioning the labels over the map and to show the list elements). I'll add my css.
- You can use google maps.
- It should be javascript, but you can not use Angular, react, SPA frameworks. I prefer pure javascript but you can use jQuery if you want.
Spanish:
Español:
Necesito un componente html puro JS o JS+jQuery map. Puedes usar los mapas de Google.
Información funcional:
Tengo 2 listas JSON. Cada lista contiene una matriz de objetos. Un objeto tiene 5 atributos o más si necesita:
-IDENTIFICACIÓN
-Etiqueta
-Texto de la etiqueta
- Longitud
-Latitud
Los mapas deben mostrar los elementos de la Lista 1 en el mapa.
- El mapa debe mostrar la ruta más corta para visitar los sitios que se muestran en la Lista 1. Un ejemplo simple con 5 puntos en la lista 1 está bien.
- La lista 2 son elementos que puedes agregar al mapa. Un ejemplo simple con 5 puntos en la lista 2 está bien.
- Para cada punto de la lista 1, el mapa debe mostrar una etiqueta y un texto de etiqueta.
- El usuario puede eliminar elementos (ese elemento se mueve de la lista 1 a la lista 2).
- El usuario puede agregar elementos de la lista 2 al mapa (ese elemento se mueve de la lista 2 a la lista 1 y se muestra en el mapa).
- El usuario puede cambiar el orden de visita de los elementos. En ese caso, el mapa muestra una nueva ruta (en ese caso, la ruta no es la ruta más corta).
Información técnica:
- Debe ser un archivo index.html con un <div> para el mapa y otro <div> para cada lista de etiquetas.
- No se necesita un diseño personalizado, por lo que puede ser tan simple como desee. Cualquier cosa básica está bien (creo que necesita algo de CSS para colocar las etiquetas sobre el mapa y mostrar los elementos de la lista). Agregaré mi css.
- Puedes usar los mapas de Google.
- Debe ser javascript, pero no puede usar marcos Angular, reaccionar, SPA. Prefiero javascript puro pero puedes usar jQuery si quieres.
I need a pure JS or JS+jQuery map html component. You can use google maps.
Functional info:
I have 2 JSON lists. Each list contains an array of objects. An object have 5 attributes or more if you need:
- ID
- Label
- Label text
- Longitude
- Latitude
The maps should show List 1 elements in the map.
- The map must show the shortest route to visit the sites shown in the List 1. A simply example with 5 points in list 1 is fine.
- List 2 are elements that you can add to the map. A simple example with 5 points in list 2 is fine.
- For each point in list 1 the map should show label and label text.
- User can remove elements (that element is moved from list 1 to list 2).
- User can add list 2 elements to the map (that element is moved from list 2 to list 1 and shown in the map).
- User can change the order to visit the elements. In that case the map show a new route (in that case the route is not the shortest route).
Technical info:
- It should be a index.html file with a <div> for the map and other <div> for each label list that I can run in local (like mostly examples available in the web).
- No custom design needed, so it can be as simple as you want. Anything basic is fine (I think you need some css to positioning the labels over the map and to show the list elements). I'll add my css.
- You can use google maps.
- It should be javascript, but you can not use Angular, react, SPA frameworks. I prefer pure javascript but you can use jQuery if you want.
Spanish:
Español:
Necesito un componente html puro JS o JS+jQuery map. Puedes usar los mapas de Google.
Información funcional:
Tengo 2 listas JSON. Cada lista contiene una matriz de objetos. Un objeto tiene 5 atributos o más si necesita:
-IDENTIFICACIÓN
-Etiqueta
-Texto de la etiqueta
- Longitud
-Latitud
Los mapas deben mostrar los elementos de la Lista 1 en el mapa.
- El mapa debe mostrar la ruta más corta para visitar los sitios que se muestran en la Lista 1. Un ejemplo simple con 5 puntos en la lista 1 está bien.
- La lista 2 son elementos que puedes agregar al mapa. Un ejemplo simple con 5 puntos en la lista 2 está bien.
- Para cada punto de la lista 1, el mapa debe mostrar una etiqueta y un texto de etiqueta.
- El usuario puede eliminar elementos (ese elemento se mueve de la lista 1 a la lista 2).
- El usuario puede agregar elementos de la lista 2 al mapa (ese elemento se mueve de la lista 2 a la lista 1 y se muestra en el mapa).
- El usuario puede cambiar el orden de visita de los elementos. En ese caso, el mapa muestra una nueva ruta (en ese caso, la ruta no es la ruta más corta).
Información técnica:
- Debe ser un archivo index.html con un <div> para el mapa y otro <div> para cada lista de etiquetas.
- No se necesita un diseño personalizado, por lo que puede ser tan simple como desee. Cualquier cosa básica está bien (creo que necesita algo de CSS para colocar las etiquetas sobre el mapa y mostrar los elementos de la lista). Agregaré mi css.
- Puedes usar los mapas de Google.
- Debe ser javascript, pero no puede usar marcos Angular, reaccionar, SPA. Prefiero javascript puro pero puedes usar jQuery si quieres.