Filter points in map [javascript]

Question

Filter points in map [javascript]

Asked 5 years, 1 month ago

Viewed 131 times

2

Hello

I have a select on my site that serves as a filter, and I would like to fade specific points on the map depending on the chosen filter.

Is it possible to associate the points made on the map with my json? if yes how can I do this?

json is doing database work.

Points on the map were created by script

It is possible to give an id to a script and put the id in the specific person of the json?

===========================================================================

Code of the select + map:

var map;
                function initMap() {
                  map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 38.736946, lng: -9.142685},
                    zoom: 7,
                    });
                    
                    var image = '/imagens/iconmapa2.png';

// Lagoa, algarve
  var beachMarker = new google.maps.Marker({
    position: {lat: 37.147150, lng: -8.483230},
    map: map,
    icon: image
  });

// ilha terceira, Açores
  var beachMarker = new google.maps.Marker({
    position: {lat: 38.721210, lng: -27.210329},
    map: map,
    icon: image
  });

// Almada, pragal
  var beachMarker = new google.maps.Marker({
    position: {lat: 38.667440, lng: -9.179570},
    map: map,
    icon: image
  });

// Terrena, alandroal
  var beachMarker = new google.maps.Marker({
    position: {lat: 38.621020, lng: -7.411580},
    map: map,
    icon: image
  });

// Terrena, alandroal - segunda vitima
  var beachMarker = new google.maps.Marker({
    position: {lat: 38.621020, lng: -7.411580},
    map: map,
    icon: image
  });

// Dafundo, Oeiras
  var beachMarker = new google.maps.Marker({
    position: {lat: 38.706230, lng: -9.250460},
    map: map,
    icon: image
  });

// Travessa das Frigideiras, Santarém
  var beachMarker = new google.maps.Marker({
    position: {lat: 39.235370, lng: -8.682080},
    map: map,
    icon: image
  });

// Moimenta da Beira, Viseu
  var beachMarker = new google.maps.Marker({
    position: {lat: 40.985050, lng: -7.617740},
    map: map,
    icon: image
  });

// Cruz de Pau, Seixal
  var beachMarker = new google.maps.Marker({
    position: {lat: 40.668580, lng: -7.933170},
    map: map,
    icon: image
  });

// Cruz de Pau, Seixal - Segunda vitima
  var beachMarker = new google.maps.Marker({
    position: {lat: 40.668580, lng: -7.933170},
    map: map,
    icon: image
  });

// Porto
  var beachMarker = new google.maps.Marker({
    position: {lat: 41.157944, lng: -8.629105},
    map: map,
    icon: image
  });

// Golegã, Santarém
  var beachMarker = new google.maps.Marker({
    position: {lat: 39.402700, lng: -8.489080},
    map: map,
    icon: image
  });

// Salamonde, Vieira do Minho
  var beachMarker = new google.maps.Marker({
    position: {lat: 41.681510, lng: -8.091410},
    map: map,
    icon: image
  });

// Ventosa, Torres Vedras
  var beachMarker = new google.maps.Marker({
    position: {lat: 39.067570, lng: -9.309280},
    map: map,
    icon: image
  });
  }
  
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6BWOev4iy16PGYkfagX-s07yLGO92hLk&callback=initMap"></script>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    var json = [{
        "Nome": "Lucia Rodrigues",
        "Idade": 48,
        "Distrito": "Faro",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Nome Desconhecido",
        "Idade": 46,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Vera Silva",
        "Idade": 30,
        "Distrito": "Setúbal",
        "Faixa Etaria": "26-35",
        "Faixa": "faixaC",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Maria Eufrázia",
        "Idade": 83,
        "Distrito": "Évora",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Luzia Rosado",
        "Idade": 80,
        "Distrito": "Évora",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Fernanda",
        "Idade": 70,
        "Distrito": "Lisboa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Nome Desconhecido",
        "Idade": 48,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Marina Mendes",
        "Idade": 25,
        "Distrito": "Viseu",
        "Faixa Etaria": "18-25",
        "Faixa": "faixaB",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Helena Cabrita",
        "Idade": 60,
        "Distrito": "Madeira",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Lana",
        "Idade": 2,
        "Distrito": "Madeira",
        "Faixa Etaria": "0-17",
        "Faixa": "faixaA",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Fernando Cruz",
        "Idade": 60,
        "Distrito": "Porto",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Masc",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Ana Maria Silva",
        "Idade": 53,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Ana Paula",
        "Idade": 40,
        "Distrito": "Braga",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Heila Lopes",
        "Idade": 44,
        "Distrito": "Lisboa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    }
    ]
    
    $(document).on("click", "#btnBuscar", function() {
  var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
  var filtroSexo = $("#Sexo option:selected").text();
  var filtroRecursoArma = $("#RecursoArma option:selected").text();
  var filtroDistrito = $("#Distrito option:selected").text();

  var arrayResultados = json.filter(function(item) {
    var criteria = true;

    if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
      criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
    if (filtroSexo != null && filtroSexo != "")
      criteria = criteria && item["Sexo"] == filtroSexo;
    if (filtroRecursoArma != null && filtroRecursoArma != "")
      criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
    if (filtroDistrito != null && filtroDistrito != "")
      criteria = criteria && item["Distrito"] == filtroDistrito;

    return criteria;

  });
  
  $(document).on("click", "#btnLimpar", function() {
  $('#selectsfiltro').each (function(){
    this.reset();
  });

  var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
  var filtroSexo = $("#Sexo option:selected").text();
  var filtroRecursoArma = $("#RecursoArma option:selected").text();
  var filtroDistrito = $("#Distrito option:selected").text();

  var arrayResultados = json.filter(function(item) {
    var criteria = true;

    if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
      criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
    if (filtroSexo != null && filtroSexo != "")
      criteria = criteria && item["Sexo"] == filtroSexo;
    if (filtroRecursoArma != null && filtroRecursoArma != "")
      criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
    if (filtroDistrito != null && filtroDistrito != "")
      criteria = criteria && item["Distrito"] == filtroDistrito;

    return criteria;

  });

<div id="escolha">
<form id="selectsfiltro">
    <h6>Faixa Etaria:</h6>
    <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
    </select>

    <br/>
    <br/> 
    <h6>Sexo:</h6>
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>
    <h6>Recurso a arma:</h6>
    <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
    </select>


    <br/>
    <br/>
    <h6>Localidade:</h6>
    <select id="Distrito" class="custom-select">
        <option ></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
    </select>
</form>

<br>

    <div class="botesdefiltrar">
        <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
        <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
  </div>   
  </div>
  
  <div id="map"></div>

You must provide code to help your problem. What you have tried?

– MauroAlmeida

2019/05/22 at 10:34
@Mauroalmeida I will edit the question and there the code I have

– David Mv

2019/05/22 at 11:08
@Mauroalmeida put the code, can you take a look? what do not mean to say! i just wanted to associate a map location to a json case with some unknown code, as if it were an html class to css you understand?

– David Mv

2019/05/22 at 11:18
You are wanting a lot in one question. Try asking a question for each feature you need.

– Ivan Ferrer

2019/10/02 at 12:03

No answers

Browser other questions tagged javascript json google-maps

You are not signed in. Login or sign up in order to post.