搜索
搜索

在地图框中设置默认标记过滤器

Colton Williams 发表于 Dev
78
科尔顿·威廉姆斯

我正在使用mapbox创建地图，但标记过滤器出现问题。我希望地图加载时已经激活的过滤器。我目前有两个按钮；开发和土地。它们都按预期工作，但是我希望地图已加载并处于“开发”过滤器状态。就目前而言，地图负载和所有标记都是可见的，从而导致某些区域（如乔治亚州东南部）看起来非常拥挤。我到过多个地方，尝试过mapbox客户支持，但他们似乎不明白我的问题。让我知道是否需要更多信息。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom marker icons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.menu-ui {
  background:#A2A19F;
  position:absolute;
  bottom:50px;
  left:50%;
  margin-left:-110px;
  z-index:1;
  border-radius:3px;
  width:auto;
  }
  .menu-ui a {
    font-size:22px;
    color:#fff;
    display:table-cell;
    padding:10px;
    text-decoration:none;
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
    .menu-ui a.active,
    .menu-ui a.active:hover {
      background:#DB3E3A;
      color:#FFF;
      }
	 
.popup {
  text-align:center;
  }
.popup .slideshow .image        { display:none; }
.popup .slideshow .image.active { display:block; }
.popup .slideshow img {
  width:100%;
  }
.popup .slideshow .caption {
  background:#eee;
  padding:10px;
  }
.popup .cycle {
  padding:10px 0 20px;
  }
  .popup .cycle a.prev { float:left; }
  .popup .cycle a.next { float:right; }
li.menu-item {
   margin:0 0 10px 0;   
}
</style>
//this defines my buttons for my filter
<nav class='menu-ui'>



  <a href='#' class='active' data-filter='Development'>Development</a><a href='#' data-filter='Land'>Land</a>


</nav>


<div id='map'></div>
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoib21uaXVzbm93IiwiYSI6ImFlZ0pNSXMifQ.VNyOy9GaRZ1cAS2nDTp3tw';
var southWest = L.latLng(21.284438,-131.265625),
    northEast = L.latLng(51.606163, -62.929688),
    bounds = L.latLngBounds(southWest, northEast);

var map = L.mapbox.map('map', 'coltonneil.3dc5d18e', {
    // set that bounding box as maxBounds to restrict moving the map
    // see full maxBounds documentation:
    // http://leafletjs.com/reference.html#map-maxbounds
    maxBounds: bounds,
    maxZoom: 16,
    minZoom: 5
});

// zoom the map to that bounding box
map.fitBounds(bounds);


var myLayer = L.mapbox.featureLayer().addTo(map);

var geoJson = [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-80.190583, 25.767619]
    },
    "properties": {
        "title": "BRICKELL WORLD PLAZA",
//this should let the button code know whether this is a development or a //land catagory, IT IS CASE SENSATIVE!!
		 "Development":true,
		 "Land":false,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
            "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/Y7O0ugQ.jpg','<p><b>Location: Miami, Florida</b></p>More than just another development. Brickell World Plaza is a benchmark for Miami’s future.<center>Visit <a href="httphttp://www.brickellworldplaza.com/://thebartram.com/"> The Bartram</a></center>.'],
          ['http://i.imgur.com/wCyKfJs.jpg',' The soaring 600 Brickell office tower is unmatched in its future-smart, Eco-friendly design and services.'],
          ['http://i.imgur.com/kvSRm4L.jpg','The 30,000-square-foot, tree-shaded Plaza will enrich the community for generations to come..']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-82.356899, 29.633012]
    },
    "properties": {
        "title": "THE BARTRAM",
		 "Development":true,
		 "Land":false,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
           "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/P6qbN8I.jpg','<p><b>Location: Gainesville, Florida</b></p>The Bartram is an environmentally friendly, Class A luxury, resort-style apartment complex, located at 2337 SW Archer Road in Gainesville Florida.									Visit <a href="http://thebartram.com/"> The Bartram</a>.'],
          ['http://i.imgur.com/tcroFTJ.jpg','Text Goes Here.'],
          ['http://i.imgur.com/yDLxcqI.jpg','Text Goes Here.']
               ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-84.650528, 34.610110]
    },
    "properties": {
        'title': 'CARTER\'S LAKE',
		 "Development":true,
		 "Land":false,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
            "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','This newly planned and gated community of 350 lots opened in 2004 on Carter’s Lake in Glimer county, Georgia.'],
          ['http://i.imgur.com/ClKkGwJ.png','The lots range in size from one to two acres each and offer some of the most spectacular views of the lake and the mountains of North Georgia.'],
          ['http://i.imgur.com/ClKkGwJ.png','Foram Group was the original co-developer of this project and is currently the asset manager for all lots in phase V of the development.']
        ]
		
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-81.052371, 32.043918]
    },
    "properties": {
        'title': 'LAUREL VIEW',
		 "Development":true,
		 "Land":false,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
            "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Laurel View is located just 30 miles south of historic downtown Savannah at the Midway interchange at 1-95, at Exit 76.'],
          ['http://i.imgur.com/ClKkGwJ.png','The prope1ty is 5, 000 acres with more than ten miles of pristine marsh and deep water frontage on Jones Creek and Laurel View River.'],
          ['http://i.imgur.com/ClKkGwJ.png','Laurel View will be a complete sustainable community with marina golf, residential and commercial sites on some of the most spectacular land in the coastal south.']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-81.247057, 32.115481]
    },
    "properties": {
        'title': 'POOLER, GA',
		 "Development":true,
		 "Land":false,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
            "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Over 900 acres of commercial and residential develc Parkway Interchange in Savannah Georgia.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-81.146635, 32.788518]
    },
    "properties": {
        'title': 'ESTILL FARM',
		 		 "Development":false,
		 "Land":true,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
           "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-81.610061, 32.750461]
    },
    "properties": {
        'title': '301 FARM',
		 		 "Development":false,
		 "Land":true,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
			"iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-85.118540, 30.927965]
    },
    "properties": {
        'title': 'SPORTING RETREAT / BASCOM',
		 		 "Development":false,
		 "Land":true,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
            "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-105.071058, 39.033353]
    },
    "properties": {
        'title': 'TRIPLE J RANCH',
		 		 "Development":false,
		 "Land":true,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
           "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
        ]
		
    }
},{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-84.490652, 34.508737]
    },
    "properties": {
        'title': 'TALKING ROCK CREEK',
		 		 "Development":false,
		 "Land":true,
        "icon": {
            "iconUrl": "http://i.imgur.com/9sxqWaV.png",
           "iconSize": [44, 27], // size of the icon
            "iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
            "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
            "className": "dot"
			
        },
		'images': [
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
          ['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
        ]
		
    }
}];

// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;
	 
    var images = feature.properties.images
    var slideshowContent = '';
	
marker.setIcon(L.icon(feature.properties.icon));
    for(var i = 0; i < images.length; i++) {
        var img = images[i];

        slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
                              '<img src="' + img[0] + '" />' +
                              '<div class="caption">' + img[1] + '</div>' +
                            '</div>';
    }

    // Create custom popup content
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<h2>' + feature.properties.title + '</h2>' +
                            '<div class="slideshow">' +
                                slideshowContent +
                            '</div>' +
                            '<div class="cycle">' +
                                '<a href="#" class="prev">&laquo; Previous</a>' +
                                '<a href="#" class="next">Next &raquo;</a>' +
                            '</div>'
                        '</div>';

    // http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 400
    });
	
});

        
// Add features to the map
myLayer.setGeoJSON(geoJson)
.addTo(map);
//this defines the buttons function
$('.menu-ui a').on('click', function() {
    // For each filter link, get the 'data-filter' attribute value.
    var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    myLayer.setFilter(function(f) {
        // If the data-filter attribute is set to "all", return
        // all (true). Otherwise, filter on markers that have
        // a value set to true based on the filter name.
        return (filter === 'all') ? true : f.properties[filter] === true;
    });
    return false;
});
//end button stuff
$('#map').on('click', '.popup .cycle a', function() {
    var $slideshow = $('.slideshow'),
        $newSlide;

    if ($(this).hasClass('prev')) {
        $newSlide = $slideshow.find('.active').prev();
        if ($newSlide.index() < 0) {
            $newSlide = $('.image').last();
        }
    } else {
        $newSlide = $slideshow.find('.active').next();
        if ($newSlide.index() < 0) {
            $newSlide = $('.image').first();
        }
    }

    $slideshow.find('.active').removeClass('active').hide();
    $newSlide.addClass('active').show();
    return false;
});

</script>


</body>
</html>

Snkashis

解决方案不是直接在下面添加以下内容myLayer.setGeoJSON(geoJson).addTo(map);吗？

myLayer.setFilter(function(f) {
    return f.properties['development'] === true;
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

谷歌地图标记过滤器与聚类

带有谷歌地图标记过滤器的侧边栏

Rails用作可标记打开-多个上下文标记过滤器

Javascript 复选框标记过滤器：未选中时隐藏结果的问题

在Twig中设置默认的原始过滤器

传单标记过滤

在子窗体中设置过滤器

如何在google.visualization.string过滤器中设置默认值

如何在Chrome开发者工具中设置默认的网络过滤器？

在Libreoffice CSV导出中更改默认文本过滤器设置

地图与过滤器操作

如何设置默认过滤器以隐藏div

如何设置默认过滤器月份和年份？

设置ActiveAdmin过滤器默认值

设置表单暴露的过滤器默认值

使用文本字段同时过滤react-table和react-leaflet标记（在表中显示过滤器数据，在地图中显示标记）

应用多个过滤器Java中的地图

链推以及JavaScript中的过滤器，地图等？

如何在scala中结合过滤器和地图？

如何在Django的过滤器类中的后端中设置过滤器范围

Django admin中的默认过滤器

DJANGO - 模型中的默认过滤器

从CSS过滤器声明中设置SVG过滤器的宽度和高度

单击清除过滤器按钮，将所有下拉列表设置为 php 中的默认值

SQL标记列表和标记过滤

用于谷歌地图 API 标记过滤的单选按钮下拉菜单

Apache POI。在Excel中设置数据过滤器

如何在Spring Boot中设置过滤器链？

GridView中相关模型的过滤器设置

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    计算数据帧R中的字符串频率

  3. 3

    如何使用Redux-Toolkit重置Redux Store

  4. 4

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  5. 5

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  6. 6

    TreeMap中的自定义排序

  7. 7

    TYPO3：将 Formhandler 添加到新闻扩展

  8. 8

    遍历元素数组以每X秒在浏览器上显示

  9. 9

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  10. 10

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  11. 11

    无法连接网络并在Ubuntu 14.04中找到eth0

  12. 12

    将辅助轴原点与主要轴对齐

  13. 13

    我可以ping IPv6但不能ping IPv4

  14. 14

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  15. 15

    提交html表单时为空

  16. 16

    使用C ++ 11将数组设置为零

  17. 17

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

  18. 18

    尝试在Dell XPS13 9360上安装Windows 7时出错

  19. 19

    如何在R中转置数据

  20. 20

    无法使用 envoy 访问 .ssh/config

  21. 21

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

热门标签

归档