Integración de Plano SVG y Generación Automática de Casas en Mapa Interactivo
Budget: $30 – $250 USD
Hola, ¿cómo estás?
Ya cuento con un plano del barrio en formato SVG y también su editable en AI.
Ahora necesito la segunda etapa del proyecto: dejar el plano listo para integrarlo en una app interactiva (React + Leaflet) y generar automáticamente la posición de todas las casas de cada manzana según reglas muy claras.
Este mapa NO es público: es un mapa interno del barrio, usado para guiar a vecinos, invitados y proveedores.
--- Objetivo del trabajo
Dejar el SVG:
Georreferenciado (alineado con coordenadas reales del barrio)
Estructurado por capas (manzanas, calles, accesos, perímetro)
Listo para que el sistema genere todas las casas automáticamente usando nuestras reglas oficiales
Exportado como SVG optimizado + GeoJSON o TileLayer compatible con Leaflet
--Reglas oficiales de numeración del barrio (muy importantes)
Estas reglas ya fueron validadas por el barrio y aplican a TODAS las manzanas:
Todas las manzanas empiezan en la MISMA esquina, marcada en el SVG (punto rojo).
Esa esquina es SIEMPRE Casa 1.
La numeración continúa en sentido horario por el perímetro.
Cada manzana tiene un número total de casas conocido (ver tabla de abajo).
Las casas se distribuyen así:
mitad de las casas en un frente largo
mitad en el frente largo opuesto
los lados cortos no llevan casas
NO se deben dibujar casas en el SVG.
La ubicación de cada casa debe generarse por software dividiendo el perímetro en segmentos iguales.
Ejemplo:
Si una manzana tiene 32 casas → 16 en un lado, 16 en el otro.
Coordenadas para georreferenciar el plano
Te paso 3 coordenadas reales para fijar escala y orientación:
(las confirmo cuando me las pidas, para evitar errores)
Ingreso por Av. Márquez
Entrada por Florida (acceso secundario)
Esquina noroeste del perímetro del barrio
Con estas 3 coordenadas se puede ajustar el SVG al mapa real.
Entregables solicitados
1. SVG final, limpio y optimizado
Cada manzana como <path> o <polygon> con id="Mxx"
Calles, accesos y perímetro en capas separadas
Sin efectos, sin sombras, sin distorsión
2. GeoJSON o TileLayer listo para Leaflet
Polígonos por manzana
Coordenadas reales alineadas
3. Script o lógica para generar casas automáticamente
Dividir el perímetro según la cantidad de casas y generar puntos georreferenciados.
4. README corto
Cómo está armado el archivo
Qué supuestos usaste
Estructura final
-- Habilidades que necesito
Manejo sólido de SVG
Leaflet / Mapbox / GIS liviano
Georreferenciación
Conocimiento de polígonos, bounding boxes y optimización de paths
-- Si necesitás ver el SVG y el AI antes de ofertar, te los mando por privado.
Este proyecto es súper concreto:
tenés el SVG, tenés las reglas del barrio, tenés la tabla de casas.
Solo necesito que quede técnicamente perfecto para integrarlo en una app web.
Listo para empezar ya.
Ya cuento con un plano del barrio en formato SVG y también su editable en AI.
Ahora necesito la segunda etapa del proyecto: dejar el plano listo para integrarlo en una app interactiva (React + Leaflet) y generar automáticamente la posición de todas las casas de cada manzana según reglas muy claras.
Este mapa NO es público: es un mapa interno del barrio, usado para guiar a vecinos, invitados y proveedores.
--- Objetivo del trabajo
Dejar el SVG:
Georreferenciado (alineado con coordenadas reales del barrio)
Estructurado por capas (manzanas, calles, accesos, perímetro)
Listo para que el sistema genere todas las casas automáticamente usando nuestras reglas oficiales
Exportado como SVG optimizado + GeoJSON o TileLayer compatible con Leaflet
--Reglas oficiales de numeración del barrio (muy importantes)
Estas reglas ya fueron validadas por el barrio y aplican a TODAS las manzanas:
Todas las manzanas empiezan en la MISMA esquina, marcada en el SVG (punto rojo).
Esa esquina es SIEMPRE Casa 1.
La numeración continúa en sentido horario por el perímetro.
Cada manzana tiene un número total de casas conocido (ver tabla de abajo).
Las casas se distribuyen así:
mitad de las casas en un frente largo
mitad en el frente largo opuesto
los lados cortos no llevan casas
NO se deben dibujar casas en el SVG.
La ubicación de cada casa debe generarse por software dividiendo el perímetro en segmentos iguales.
Ejemplo:
Si una manzana tiene 32 casas → 16 en un lado, 16 en el otro.
Coordenadas para georreferenciar el plano
Te paso 3 coordenadas reales para fijar escala y orientación:
(las confirmo cuando me las pidas, para evitar errores)
Ingreso por Av. Márquez
Entrada por Florida (acceso secundario)
Esquina noroeste del perímetro del barrio
Con estas 3 coordenadas se puede ajustar el SVG al mapa real.
Entregables solicitados
1. SVG final, limpio y optimizado
Cada manzana como <path> o <polygon> con id="Mxx"
Calles, accesos y perímetro en capas separadas
Sin efectos, sin sombras, sin distorsión
2. GeoJSON o TileLayer listo para Leaflet
Polígonos por manzana
Coordenadas reales alineadas
3. Script o lógica para generar casas automáticamente
Dividir el perímetro según la cantidad de casas y generar puntos georreferenciados.
4. README corto
Cómo está armado el archivo
Qué supuestos usaste
Estructura final
-- Habilidades que necesito
Manejo sólido de SVG
Leaflet / Mapbox / GIS liviano
Georreferenciación
Conocimiento de polígonos, bounding boxes y optimización de paths
-- Si necesitás ver el SVG y el AI antes de ofertar, te los mando por privado.
Este proyecto es súper concreto:
tenés el SVG, tenés las reglas del barrio, tenés la tabla de casas.
Solo necesito que quede técnicamente perfecto para integrarlo en una app web.
Listo para empezar ya.