Algoliaでネストされた値をフィルタリングする方法

Algoliaでindexからネストされた値をもとにフィルタリングするには、

AlgoliaのダッシュボードにあるdisplayタブにあるFaceting項目のAttributes for facetingに下のようにフィルタリングしたい値を設定して、

※ダッシュボードの変更は、セーブしないと適用されないのでちゃんとセーブしましょう。セーブボタンは、右上あたりに出てると思う。( 多分 )

index.search({
    facetFilters: ” ここにダッシュボードで設定したキーをいれる”
},
(err,content) => {
    if(err) throw err;
    console.log( content );
});
のように、facetFilters:” 設定したキー”で、フィルタリングした値が取れる。

react-map-glのPopup

1.Popupをインポート

import {Popup} form ‘react-map-gl’;

2.使い方

hoge(){

return (

<Popup

tipSize={5} //座標を指すチップのサイズ。

anchor=”top” //座標に対するポップアップの位置を示す文字列。オプションはtopbottomleftrighttop-lefttop-rightbottom-leftbottom-right

longitude={~~~}

latitude={~~~}

onClose={function}

>

<div>{~~~~~}</div>

</Popup>

);

}

react-map-glのMarker

1.Markerをインポート

import { Marker } form ‘react-map-gl’;

2. 使い方

hoge(){

return data.map((element,i)=>{

const {info,coordinates} = element; //data情報を取得

return (

<Marker key={i}

longitude= {coordinates[0]}

latitude={coordinates[1]}

>

<div><span>{info}</span></div>

</Marker>

);

});

}

react-map-glの導入

1.react-map-glをインストール
npm i --save react-map-gl

2.react内で使う
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ReactMapGL from ‘react-map-gl’;

class Map extends React.Component{
constructor(props){
super(props);

this.state = {
viewport:{
width :400,
height :400,
latitude :37.7577,
longitude :-122.4376,
zoom :8
}
};
}

render(){
const {viewport} = this.state;
return (

<ReactMapGL

mapStyle=”mapbox:~~~”

{…viewport}

onViewportChange={

viewport => this.setState(viewport);

}

>

</ReactMapGL>

);

}

3.webpackに以下を追加

process.env[‘MapboxAccessToken’]= “~~~~”;

以下略———————–>>

plugins:[

new webpack.EnviromentPlugin([‘MapboxAccessToken’])

]

<<——————–以下略